Currently, I am faced with a situation where I need the v-model binding of an input field to be determined by the computed property's returned value.
Take a look at the example provided below:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1d0a18ca8e929c83908988">[email protected]</a>/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>
In the code snippet above, I aim to bind the first field to value.first and the second field to value.second based on the values returned from the computed property. Currently, there are only two returned values - value.first and value.second. However, in reality, this will depend on logic.
I suspect that I may not be utilizing the get and set methods correctly. Any assistance would be greatly appreciated.
Please note: In a previous inquiry along similar lines, there was only one value returned in the computed property instead of an array/object. The solution provided worked well. However, this time, we have two values that require setting. You can refer to that thread here: Vuejs Input Binding Based on Computed Property