javascript - vue中怎麼給input的value綁定計算屬性
巴扎黑
巴扎黑 2017-06-30 09:58:44
0
3
1918

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

<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;
                }
            }
        });
巴扎黑
巴扎黑

全部回覆(3)
小葫芦
<input id="paramsSetInput" 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 id="paramsSetInput" data-key="params"  :value="paramsValue">

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

綁定v-model之後在js裡面計算就行了啊,會自動綁定進去的

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板