从后端返回的数据中,有时候你会遇到一堆的input,然后每个input后面都跟有一个按钮,就像这种情况
其中有两个问题,1:在一个框里面输入值,然后所有的值都都会显示你输入的结果 2:每个输入框点击能控制所有的input而不只是它前面的那一个
其实解决也不复杂,主要是运用到了循环以及index指数的功能,下面开始上代码,首先把它遍历出来
<tr v-for="(item,index) in bstp" v-if="bstp">
<td><input type="text" name="" class="form-control" min="0" step="" required="required" title="" v-model="item.value"></td>
<td><button type="button" class="btn btn-success btn-sm" @click="amendCardNum(index)">修改</button></td>
</tr>
后台给我的数据是个对象,我用的是for in遍历出来,这个newData是走ajax请求来的数据
for(var x in newData){
newData[x].value='';
}
然后数据中的每个对象都加上了这个value属性,接下来就好办啦,点击之后走个方法,直接获取
amendCardNum(index){
var v=this.bstp[index].value;
console.log(v)
}
大家做项目的时候一定要多想操作数据而不是操作dom,我之前就是陷到操作dom里面,要用for获取那个输入框的value之类的,然后越陷越深,这都是用jquery留下的后遗症,大家一定要注意,vue尽量不要用jquery,一切以操作数据为主而不是dom
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。