基于计算属性的Vuejs输入绑定 [英] Vuejs Input Binding Based on Computed Property
问题描述
我有一个场景，我希望输入字段的 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="app" class="container-fluid"><h2>输入绑定</h2><p><b>名字</b></p><input type="text" v-model="value.first" placeholder="输入名字"/><p style="margin-top:20px;"><b>第二名</b></p><input type="text" :v-model="lastName" placeholder="输入姓氏"/><小时/><p>{{value.first}} {{value.second}}</p><小时/><p>计算属性的值:{{lastName}}</p><脚本>新的 Vue({el: '#app',数据:函数(){返回 {价值: {第一的:''，第二:''}}},计算:{//一个计算得到的 getter姓氏:函数(){返回 'value.second'}}});</html>
正如你在上面的代码中看到的，我希望第一个字段绑定到 value.first，所以我选择了 v-model="value.first".对于第二个字段，我希望模型绑定由计算属性返回的值决定.现在这是一个简单的例子，只有一个返回值，即 value.second.但这将取决于逻辑.
现在，当我尝试进行绑定时，它不会返回任何内容.非常感谢任何帮助.
您可以使用 计算 setter 如下:
计算:{姓: {得到(){//执行你的逻辑返回 'value.second'},设置(新值){this.value.second = newValue;}}}现在将此计算属性用作模板中的 v-model；
这是小提琴
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" class="container-fluid">
<h2>Input Binding</h2>
<p><b>First Name</b></p>
<input type="text" v-model="value.first" placeholder="Enter first name" />
<p style="margin-top:20px;"><b>Second Name</b></p>
<input type="text" :v-model="lastName" placeholder="Enter last name" />
<hr />
<p>{{value.first}} {{value.second}}</p>
<hr />
<p>Value of computed property: {{lastName}}</p>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
value: {
first:'',
second:''}
}
},
computed: {
// a computed getter
lastName: function() {
return 'value.second'
}
}
});
</script>
</body>
</html>
As you can see in the above code, I want the first field to be bound to value.first so I have chosen v-model="value.first". For the second field, I want the model binding to be decided by the value returned from computed property. Right now it's a simple example and there's only one returned value, i.e., value.second. But this will be decided on logic.
Right now when I try to do that binding, it doesn't return anything. Any help is greatly appreciated.
You can make use of a computed setter as follows:
computed: {
lastName: {
get(){
//perform your logic
return 'value.second'
},
set(newValue){
this.value.second = newValue;
}
}
}
Now use this computed property as v-model in your template;
<input type="text" v-model="lastName" placeholder="Enter last name" />
Here is the fiddle
这篇关于基于计算属性的Vuejs输入绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
