刚开始接解vuejs,现在有个问题是这样的,我想实现一个表格中的数据查看的时候是普通的text数据,一旦点击每一行的编辑按钮时,这一行的数据以input输入框来实现,
我初步的设想是这样的:给这一列数据的data添加一个editmode属性,一旦点击编辑按钮后改成editmode为true,然后v-if根据这个值来决定输出样式:
id | name | pass | 操作 |
---|---|---|---|
{{$index + 1}} |
{{data.name}}
|
{{data.name}}
|
然后在方法中
edit: function(data){ //alert(data.editmode); data.editmode = true; }
我可以看到每次这样子做后,editmode确实改变成了true,但是那一行数据并没有变成input模式,求教实现方法。
代码是没有错的,我试了一下可以跑起来:
https://jsbin.com/rajeqo/edit...
我怀疑问题出在你的 apidata 这个数据里面没有 editmode 这个属性. 导致在 edit 里面赋值 data.editmode Vue 并没有去监听这个变化。所以你要做的就是 默认让 apidata 里面的数据项都有一个默认的 editmode 属性
楼主麻烦贴下data代码 以上代码我看了下是没有错误的
为何要那么麻烦写
<div v-if="data.editmode"><input v-model="data.name"></div> <div v-else>{{data.name}}</div>
直接用input 展示数据就好 了 ,使用css 将input的样式去掉,顺带禁用input的编辑,
编辑时候在恢复回来不就得了
<table> <tr> <td>姓名:</td> <td> <input type="text" :disabled="isEdi" :class="{ 'ediClass' : isEdi }" v-model="text" > </td> <td> <button @click=" saveOrEdi "> {{ isEdi ? '保存' : '编辑' }} </button> </td> </tr> </table> <style> input{ border: none; outline: none; background: rgba(255,255,255,0); } .ediClass{ border:1px #e9e9e9 solid; } </style> <script> new Vue({ el:"body", data: { isEdi: false, text: '某某' }, methods: { saveOrEdi:function(){ if(this.isEdi){ // 编辑状态下 执行保存 .... this.$set("isEdi",false) }else{ // 非编辑状态下 编辑 this.$set("isEdi",true) } } } }) </script>