为什么写这篇随笔
在开发过程中,遇见form里面使用v-for展示列表,:value绑定需要显示的值,然后提交后发现input框中修改后的值并未修改。
解决方式: 监控提交数据,发现并未改变 即input输入的值使用并未修改父组件传过来的对象,随后使用v-model进行数据的双向绑定解决问题。
修改后代码如下:<form class="form-horizontal" role="form" style="margin-top: 50px;" method="post"> <!-- 数据展示 --> <template v-for="(value1,index) in varParams"> <div class="form-group col-xs-5"> <div class="input-group"> <div class="formControls col-xs-12"> <input class="form-control" :value="index" disabled="disabled" required/> </div> </div> </div> <div class="form-group col-xs-5"> <div class="input-group"> <div class="formControls col-xs-12"> <input class="form-control" v-model="varParams[index]" required/> </div> </div> </div> <div class="form-group col-xs-2" style="margin: 6px 0px;"> <div class="input-group"> <div class="formControls col-xs-12"> <input type="button" class="btn btn-warning" value="删除" @click="removeParam(index)"/> </div> </div> </div> </template> <div class="form-group col-xs-4"> <div class="input-group"> <div class="formControls col-xs-12"> <input class="form-control" v-model="key" required/> </div> </div> </div> <div class="form-group col-xs-8"> <div class="input-group"> <div class="formControls col-xs-12"> <input class="form-control" v-model="value" required/> </div> </div> </div></form>
转载于:https://www.cnblogs.com/koyi0000/p/10910332.html
