javascript - vue中怎么給input的value綁定計算屬性

問題描述

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

<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'>數字</option> <option value='date'>日期</option> <option value='time'>時間</option></select><input type='button' value='刪除' @click='deleteParam(index)'> </p> <input type='button' value='添加參數' @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是數據雙向綁定，所以寫的:value不會生效。

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

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

綁定v-model之后在js里面計算就行了啊，會自動綁定進去的