vue v-for v-model提交数据

为什么写这篇随笔

       在开发过程中，遇见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>