問題描述

vue中怎么給input#paramsSetInput的value綁定計(jì)算屬性

<p id='paramsSetWrap'> <input type='hidden' data-key='params' v-model='paramsSetData' :value='paramsValue'> <p v-for='(param,index) in paramsSetData'><input type='text' placeholder='key' v-model='param.key' :value='param.key'><input type='text' placeholder='title' v-model='param.title' :value='param.title'><input type='text' placeholder='value' v-model='param.value' :value='param.value'><select name='' 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'>時(shí)間</option></select><input type='button' value='刪除' @click='deleteParam(index)'> </p> <input type='button' 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;} }});

問題解答

<input type='hidden' data-key='params' v-model='paramsSetData' :value='paramsValue'>

這句里面，你既綁定了v-model又綁定了:value，由于v-model是數(shù)據(jù)雙向綁定，所以寫的:value不會(huì)生效。

去掉v-model，否則v:bind:value不起作用。v-model 負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，直接操作數(shù)據(jù)同時(shí)input的value會(huì)更改，所謂的雙向綁定。:value只是給input的value賦值，直接操作數(shù)據(jù)input的value會(huì)被更改，和上面的沖突了，不會(huì)生效。修改成如下方式。

<input data-key='params' :value='paramsValue'> el: ’#paramsSetWrap’,data: { dataParamsValue:'initVal',},computed:{ paramsValue:function(){return this.dataParamsValue+' TEST'; }}回答3：

綁定v-model之后在js里面計(jì)算就行了啊，會(huì)自動(dòng)綁定進(jìn)去的