javascript - 输入模型的vuejs v-if条件

我只是学习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;
            }

我认为当我单击.because时，data.editmode将更改为true。
该行将转换为输入模式。但是它没用。
我已经尝试过v-if = data.editmode，v-if =“data.editmode”，v-show =“data.editmode”，仍然一无所获
我不知道为什么吗？

最佳答案

您只需要在数据声明中包括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>