Question

如何使用Vue.js将方法结果绑定到v模型？

示例：

<someTag v-model="method_name(data_attribute)"></someTag>

由于某种原因，我无法使其发挥作用。

谢谢。

Answer 1

几年后，随着更多的经验，我发现绑定:value比使用v模型更容易。然后，您可以通过捕获@change来处理更新。

Answer 2

v-model个表达式必须具有get和set功能。对于大多数变量，这是非常简单的，但您也可以使用计算属性来自己定义它们：

data:function(){
    return { value: 5 }
},
computed: {
    doubleValue: {
        get(){
            //this function will determine what is displayed in the input
            return this.value*2;
        },
        set(newVal){
            //this function will run whenever the input changes
            this.value = newVal/2;
        }
    }
}

然后您可以使用<input v-model="doubleValue"></input>

如果您只是希望标记显示方法结果，请使用<tag>{{method_name(data_attribute)}}</tag>

Answer 3

同意：值和 @change 组合greenymaster。即使当我们在get / set中拆分计算属性时（这是有帮助的），如果在调用get（）时需要一个参数，使其工作似乎也很复杂。我的示例是一个中等大小的动态对象列表，其中填充了一个复杂的输入列表，因此：

我无法轻易地在子元素上进行监视，除非我深入观察整个父级列表，但这将需要更复杂的功能来确定哪些插入道具和/或列表已更改并从中进行操作< / li>
我不能直接使用带有v-model的方法，因为它可以提供'get（param）'方法（可以这么说），但是它没有'set（）'方法
计算属性的拆分也有相同的问题，但反之，具有“ set（）”但没有“ get（param）”

使用Vue.js将绑定方法结果导入v-model

3 个答案: