vue.jsで行からデータを投稿

Question

値を変更するために使用できるドロップダウン選択があるテーブルがあります。この選択は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> 

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/