输入模型的vuejs v-if条件

Posted 2023-02-22

【中文标题】输入模型的vuejs v-if条件

【英文标题】：vuejs v-if condition for input model

【发布时间】：2017-02-02 06:20:35

【问题描述】：

我只是学习 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" , 还是一无所获 我不知道为什么？

【参考方案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>

【讨论】：

它是一个很好的解决方案。但是这个数据是用ajax获取的。和它一样 [name:'test', pass:'1', name:'test2', pass:'2' , .....]。

您需要先将editmode 添加到数组项中，然后再将其分配给apidata。