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>