vue中怎麼給input#paramsSetInput的value綁定計算屬性
<p id="paramsSetWrap">
<input id="paramsSetInput" type="hidden" data-key="params" v-model="paramsSetData" :value="paramsValue">
<p v-for="(param,index) in paramsSetData">
<input type="text" class="col-sm-2" placeholder="key" v-model="param.key" :value="param.key">
<input type="text" class="col-sm-2" placeholder="title" v-model="param.title" :value="param.title">
<input type="text" class="col-sm-3" placeholder="value" v-model="param.value" :value="param.value">
<select name="" class="col-sm-3" id="" placeholder="type" v-model="param.type" :value="param.type">
<option value="string">字符串</option>
<option value="number">數(shù)字</option>
<option value="date">日期</option>
<option value="time">時間</option>
</select>
<input type="button" class="col-sm-2" value="刪除" @click="deleteParam(index)">
</p>
<input type="button" class="col-sm-11" value="添加參數(shù)" @click="addParam">
</p> new Vue({
el: "#paramsSetWrap",
data: {
paramsSetData: [{key: "", value: "", title: "", type: "string"}],
},
methods: {
deleteParam: function (index) {
this.paramsSetData.splice(index, 1);
},
addParam: function () {
this.paramsSetData.push({key: "", value: "", title: "", type: "string"});
}
},
computed:{
paramsValue:function(){
return this.paramsSetData;
}
}
});
3
0
0
<input id="paramsSetInput" type="hidden" data-key="params" v-model="paramsSetData" :value="paramsValue">這句裡面，你既綁定了v-model又綁定了:value，由於v-model是資料雙向綁定，所以寫的:value不會生效。
去掉v-model，否則v:bind:value不起作用。
v-model 負責監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，直接操作數(shù)據(jù)同時input的value會更改，所謂的雙向綁定。
:value只是給input的value賦值，直接操作資料input的value會被更改，跟上面的衝突了，不會生效。
修改成如下方式。
<input id="paramsSetInput" data-key="params" :value="paramsValue">
el: '#paramsSetWrap',
data: {
dataParamsValue:"initVal",
},
computed:{
paramsValue:function(){
return this.dataParamsValue+" TEST";
}
}
