Javascript 使用vue.js发布行中的数据

我有一个带有下拉选择的表，可以用来修改值。此选择使用v-for返回值。如果用户单击“保存”，则需要更新该行。除非我能以某种方式使其动态化，否则v-model不会起作用。但我实际上不知道怎样做才是正确的方法

<template>  
    <div id="php_vhost_settings">

        ...

            <div class="table-responsive" style="overflow: visible;">
                <table class="table" v-show="!loading">
                    <thead>
                        <tr>
                            <th>Domain</th>
                            <th>Document root</th>
                            <th>Version</th>
                            <th>PHP-fpm</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="vhostversion in vhostVersions">
                            <td>{{ vhostversion.vhost }}</td>
                            <td>{{ vhostversion.documentroot }}</td>
                            <td>
                                <div class="form-group">
                                    <select class="form-control" data-placeholder="Choose a Category" tabindex="1" v-model="formVhostVersion.version">
                                        <option 
                                            v-for="installed in installedVersions.versions" 
                                            :value="installed" 
                                            :selected="(installed === vhostversion.version)"
                                        >{{ installed }}</option>
                                    </select>
                                </div>
                            </td>
                            <td>
                                {{ vhostversion.php_fpm }}
                            </td>
                            <td>

                                <div class="btn-group m-r-10 pull-right">
                                    <button @click="updatePhpVhostVersion()" class="btn btn-primary waves-effect waves-light" type="button">Save</button>
                                    <button @click="showEditPhpIni(vhostversion)" class="btn btn-default waves-effect waves-light" type="button">Edit php.ini</button>
                                </div>

                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

      ...

    </div>
</template>

...
领域
文档根
版本
PHP fpm
{{vhostversion.vhost}
{{vhostversion.documentroot}
{{已安装}}
{{vhostversion.php_fpm}}
拯救
编辑php.ini
...

JavaScript：

<script>
export default {
    /*
     *  component's data.
     */
    data() {
        return {
            installedVersions: [],
            vhostVersions: [],
            vhostVersion: [],
            errors: '',
            modalTitle: '',
            modalContent: '',
            loadingMessage: '',
            loading: false,
            formVhostVersion: {
                vhost: '',
                version: '',
                hostname: hostname,
                username: username
            },
        };
    },

   // ....

        updatePhpVhostVersion() {
            console.log(this.formVhostVersion);

            axios.post('/api/php/updatevhost', this.updateVhostVersion)
                .then(response => {
                    this.prepare();
                });
        },

....
    }
}

</script>

导出默认值{
/*
*组件的数据。
*/
数据（）{
返回{
已安装版本：[]，
vhostVersions:[]，
vhostVersion:[]，
错误：“”，
模态：''，
modalContent:“”，
正在加载消息：“”，
加载：false，
formVhostVersion：{
vhost:“”，
版本：“”，
主机名：主机名，
用户名：username
},
};
},
// ....
UpdatePhvHostVersion（）{
console.log（此.formVhostVersion）；
post（'/api/php/updatevhost'，this.updateVhostVersion）
。然后（响应=>{
这个。准备（）；
});
},
....
}
}

如果重新排列数据结构，只需绑定到对象数组上的索引即可。要准确地了解您正在做什么有点困难，但作为一个简化版本（您可能需要根据需要进行调整），您可以：

<template>
  <table>
    <tr v-for="(vhostversion, index) in vhostVersions">
      <td>{{ vhostversion.vhost }}</td>
      <td>{{ vhostversion.documentroot }}</td>
      <td>
        <div class="form-group">
          <select v-model="vhostVersions[index].version">
            <option value="foobar">Foobar</option>
            <option value="bazqux">Bazqux</option>
          </select>
        </div>
      </td>
      <td>
        <button @click="updatePhpVhostVersion(index)">
          Save
        </button>
      </td>
    </tr>
  </table>
</template>

<script type="text/javascript>
export default{
  methods: {
    updatePhpVhostVersion(index) {
      console.log('update:' + this.vhostVersions[index].vhost + ' to ' + this.vhostVersions[index].version)
    }
  },
  data: {
    vhostVersions: [{
      vhost: 'foo',
      documentroot: '/public',
      version: 'foobar'
    }, {
      vhost: 'bar',
      documentroot: '/public',
      version: 'bazqux'
    }]
  }
}
</script>

{{vhostversion.vhost}
{{vhostversion.documentroot}
福巴
巴兹库克斯
拯救
谢谢我在家的时候会试试的。昨天我想出了一个快速的解决方法，这个方法很有效，但是有一些问题。。。