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里面计算就行了啊，会自动绑定进去的