vuejs v-if输入模式的条件

Question

我只是学习vue.js ，我想显示一个表data.my的意见是当显示模式表刚刚显示。当我点击表格行的编辑按钮时，我想把这行转换为模型。

这是我的代码： ```

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