javascript - Comment lier les propriétés calculées à la valeur d'entrée dans Vue

Question

Comment lier les attributs calculés à la valeur de input#paramsSetInput dans 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">

Dans cette phrase, puisque vous avez lié v-model又绑定了:value，由于v-model是数据双向绑定，所以写的:value cela ne prendra pas effet.

Answer 2

Supprimez v-model, sinon v:bind:value ne fonctionnera pas.
v-model est chargé de surveiller les événements d'entrée de l'utilisateur pour mettre à jour les données, d'exploiter directement les données et la valeur d'entrée changera en même temps, ce qu'on appelle la liaison bidirectionnelle.
 : la valeur attribue uniquement la valeur de l'entrée. En opérant directement, la valeur de l'entrée de données sera modifiée, ce qui entre en conflit avec ce qui précède et ne prendra pas effet.
Modifiez-le comme suit.

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

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

Answer 3

Après avoir lié le v-model, calculez-le simplement en js, il sera automatiquement lié