基于计算属性数组的Vuejs输入绑定 [英] Vuejs Input Binding Based on Array of Computed Properties
问题描述
我有一个场景，我希望输入字段的 v-model 绑定由计算属性返回的值决定.
请看下面的例子:
<头><script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><身体><div id="应用程序">{{价值}}<input type="text" v-model="myName.first"><input type="text" v-model="myName.second"><脚本>新的 Vue({el:'#app',数据:{价值:{第一的: ''，第二: ''}},计算:{我的名字: {得到(){返回 {first:'this.value.first',second:'this.value.second'};//这实际上来自一个API},设置(新值){this.value.first = newValue.second;this.value.second = newValue.second;}}}});</html>
正如你在上面的代码中看到的，我希望第一个字段绑定到 value.first，第二个值绑定到 value.second.对于这两个字段，我希望模型绑定由计算属性返回的值决定.现在是一个简单的例子，只有两个返回值，即 value.first 和 value.second.但这将取决于逻辑.
我觉得我没有正确使用 get 和 set.非常感谢您的帮助.
注意:我之前有一个关于类似行的问题，但它在计算属性中只返回了一个值，而不是数组/对象.提供的答案效果很好 但是，这次的挑战是我们需要设置两个值.您可以在此处查看该线程:Vuejs Input Binding Based on Computed Property
您可以直接对计算属性进行 v-model，而无需使用数据或设置/获取.
数据:{}，计算:{我的名字:函数(){返回 this.$store.state.myName;//或无论你的api是什么}}此外，请确保在加载输入之前存在计算属性的值.
I have a scenario where I want the v-model binding of an Input field to be decided by the value returned by a computed property.
Please see the example below:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
{{value}}
<input type="text" v-model="myName.first">
<input type="text" v-model="myName.second">
</div>
<script>
new Vue({
el:'#app',
data:{
value:{
first: '',
second: ''
}
},
computed: {
myName: {
get(){
return {first:'this.value.first',second:'this.value.second'}; //this will actually come from an API
},
set(newValue){
this.value.first = newValue.second;
this.value.second = newValue.second;
}
}
}
});
</script>
</body>
</html>
As you can see in the above code, I want the first field to be bound to value.first and second value to be bound to value.second. For both fields, I want the model binding to be decided by the value returned from computed property. Right now it's a simple example and there are only two returned value, i.e., value.first and value.second. But this will be decided on logic.
I feel I am not making use of get and set correctly. Really appreciate any help.
Note: I had a previous question on similar lines but it had only one value returned in computed property instead of an array/object. The answer provided worked great However, this time the challenge is that we have two values that need to be set. You can see that thread here: Vuejs Input Binding Based on Computed Property
You can v-model directly to a computed property without using data or set/get.
<input type="text" v-model="myName.first">
data:{},
computed: {
myName: function() {
return this.$store.state.myName; //or whatever your api is
}
}
Also, make sure the value of your computed property is present before your input loads.
这篇关于基于计算属性数组的Vuejs输入绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
