javascript - How to bind calculated properties to input value in vue

Question

How to bind calculated attributes to the value of input#paramsSetInput in vue

<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">数字</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="添加参数" @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;
                }
            }
        });

Answer 1

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

In this sentence, you have bound both v-model and :value. Since v-model is a two-way binding of data, writing :value will not take effect.

Answer 2

Remove v-model, otherwise v:bind:value will not work.
v-model is responsible for monitoring user input events to update data, directly operating data and the input value will change at the same time, so-called two-way binding.
: value only assigns the value of the input. Directly operating the value of the data input will be changed, which conflicts with the above and will not take effect.
Modify it as follows.

<input id="paramsSetInput" data-key="params"  :value="paramsValue">

     el: '#paramsSetWrap',
        data: {
            dataParamsValue:"initVal",
        },
        
        computed:{
            paramsValue:function(){
                return this.dataParamsValue+" TEST";
            }
        }

Answer 3

After binding v-model, just calculate it in js, it will be automatically bound