vuejs如何v-if的用法 财富值1

2016-09-25 16:36发布

刚开始接解vuejs,现在有个问题是这样的,我想实现一个表格中的数据查看的时候是普通的text数据,一旦点击每一行的编辑按钮时,这一行的数据以input输入框来实现,
我初步的设想是这样的:给这一列数据的data添加一个editmode属性,一旦点击编辑按钮后改成editmode为true,然后v-if根据这个值来决定输出样式:

<table class="table table-bordered">                     <thead>                         <tr>                             <th>id</th>                             <th>name</th>                             <th>pass</th>                             <th>操作</th>                         </tr>                     </thead>                     <tbody>                         <template v-for="data in apidata" track-by="$index">                             <tr>                                 <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.name"></div>                                     <div v-else>{{data.name}}</div>                                 </div>                                 </td>                                 <td>                                     <button v-on:click="remove($index)" class="btn btn-danger">删除</button>                                     <button v-on:click="edit(data)" class="btn btn-danger">编辑</button>                                 </td>                             </tr>                         </template>                     </tbody>                 </table>

然后在方法中

            edit: function(data){                 //alert(data.editmode);                 data.editmode = true;             }

我可以看到每次这样子做后,editmode确实改变成了true,但是那一行数据并没有变成input模式,求教实现方法。

3条回答

我怀疑问题出在你的 apidata 这个数据里面没有 editmode 这个属性. 导致在 edit 里面赋值 data.editmode Vue 并没有去监听这个变化。所以你要做的就是 默认让 apidata 里面的数据项都有一个默认的 editmode 属性

一周热门 更多>