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>