vuejs入力モデルの場合の条件は、

Question

です。私はちょうどvue.jsを学ぶ と私はテーブルのデータを表示したい。テーブルの行の編集ボタンをクリックすると、この行をモデルに変換します。

これは私のコードです： `` `

<table class="table table-bordered"> 
    <thead> 
     <tr> 
      <th>id</th> 
      <th>name</th> 
      <th>pass</th> 
      <th>action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <template v-for="data in apidata" track-by="$index"> 
      <tr> 
       <td>{{$index + 1}}</td> 
       <td> 
        <div v-show="data.editmode"><input v-model="data.name"></div> 
        <div v-else>{{data.name}}</div> 
       </td> 
       <td> 
        <div v-if=data.editmode><input v-model="data.name"></div> 
        <div v-else>{{data.name}}</div> 
       </div> 
       </td> 
       <td> 
        <button v-on:click="remove($index)" class="btn btn-danger">remove</button> 
        <button v-on:click="edit(data)" class="btn btn-danger">edit</button> 
       </td> 
      </tr> 
     </template> 
    </tbody> 
</table> 

``` 
my data is like this 

    [{name:'test', pass:'1'}, {name:'test2', pass:'2'}] 

i bind a edit()function to listen the click event. 
    edit: function(data){ 
       alert(data.editmode); 
       data.editmode = true; 
      } 

私がクリックしたときに.becuase data.editmodeをtrueに変更すると思います。 この行は入力モードに変換されます。しかしそれは役に立たない。 私はv-if = data.editmode、v-if = "data.editmode"、v-show = "data.editmode"を試しましたが、まだ何も得られていません なぜですか？

Answer 1

editmodeをデータ宣言に含めるだけで、反応的なデータ項目にすることができます。

new Vue({ 
 
    el: 'body', 
 
    data: { 
 
    apidata: [{ 
 
     name: 'test', 
 
     pass: '1', 
 
     editmode: false 
 
    }, { 
 
     name: 'test2', 
 
     pass: '2', 
 
     editmode: false 
 
    }] 
 
    }, 
 
    methods: { 
 
    edit: function(data) { 
 
     data.editmode = !data.editmode; 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script> 
 
<table class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>name</th> 
 
     <th>pass</th> 
 
     <th>action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr v-for="data in apidata"> 
 
     <td>{{$index + 1}}</td> 
 
     <td> 
 
     <div v-if="data.editmode"> 
 
      <input v-model="data.name"> 
 
     </div> 
 
     <div v-else>{{data.name}}</div> 
 
     </td> 
 
     <td> 
 
     <div v-if=data.editmode> 
 
      <input v-model="data.pass"> 
 
     </div> 
 
     <div v-else>{{data.pass}}</div> 
 
     </td> 
 
     <td> 
 
     <button v-on:click="remove($index)" class="btn btn-danger">remove</button> 
 
     <button v-on:click="edit(data)" class="btn btn-danger">edit</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>