從vue.js中發佈數據行

Question

我有一個可用於修改值的下拉選擇表。此選擇使用v-for來返回值。如果用戶點擊保存，該行需要更新。除非我能夠以某種方式使其動態化，否則V模型不會做到這一點。但我實際上並不知道什麼是正確的做法。

<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> 

中的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> 

Answer 1

如果重新安排你的數據結構，你可以簡單地綁定到索引對象的數組。這是一個有點難以看到你在做什麼，但作爲一個簡化版本（你可能需要調整你的需求），你可以這樣做：

<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> 

通過在v-for索引我現在知道什麼紀錄更新。這裏的JSFiddle：https://jsfiddle.net/vy07r9ht/