vue.js关于循环出来多个input并让每个input后的修改按钮控制其值

2019年9月14日 123次阅读 来源: 蓝调爵士

从后端返回的数据中，有时候你会遇到一堆的input，然后每个input后面都跟有一个按钮，就像这种情况
《vue.js关于循环出来多个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

    原文作者：蓝调爵士
    原文地址: https://segmentfault.com/a/1190000012394597
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞