javascript - vuejs v-model 让它只从一处改变

Question

嗨，我有带有 Laravel Blade 的 vuejs2 代码..现在我的问题是我有这个 vuejs2 代码

new Vue({
    el:'.add_item_to_price_menu',
    data:{
        percentage:null,
    },
    methods:{
        searchData:function(){
            console.log(this.percentage);
        }
    }
});

这是我的 Blade 代码

<input type='text' @keyup='searchData' v-model='percentage' id='percentage' placeholder='{{trans("language.percentage")}}' class='form-control parent' />

<input v-model='percentage' type='text' class='form-control child' />
<input v-model='percentage' type='text' class='form-control child' />

现在我想要的是改变父类改变每个 child 的值，这对我有用，但是当我改变 child 时我不希望它改变每个花药模型百分比有什么办法可以做到这一点谢谢

Answer 1

一个简单的方法是不使用v-model，而仅使用:value=percentage。

v-model 是使用 prop 和事件的语法糖。来自 Vue docs :

the [...] component must:

• Bind the value attribute to a value prop
• On input, emit its own custom input event with the new value

因此，如果您只使用 :value 那么它就是一种单向绑定(bind)。只需考虑到，如果用户更改这些输入之一，它不会反射(reflect)在您的模型中。