How do you create a nested binding scope in vue.js? - vue.js

Question

A Vue instance can allow you to create nested view models. For example, consider the following
new Vue({
el: '#app',
data: {
form: {
firstName: "Joe",
lastName: "Bloggs"
}
},
computed: {
name: function () {
return this.form.firstName + ' ' + this.form.lastName;
}
}
});
As you can see, there is a nested form-data object: form.firstName and form.lastName. I can bind this view-model to HTML with the following:
<div id="app">
<form>
<label>
First:
<input type="text" v-model="form.firstName">
</label>
<label>
Last:
<input type="text" v-model="form.lastName">
</label>
</form>
<div>
You are: {{name}}
</div>
</div>
Here's a JS Fiddle for this Vue.js example
Now, my question is: is there a simple way (e.g. a directive) to create a nested binding scope that allows me to address firstName and lastName without the preceding "form."?
Knockout.js has the with binding that allows you to explicitly specify a binding scope in relationship to your view-model. Here is a JS Fiddle showing Knockout.js using the with binding
Is there a simple analogue to Knockout's with binding in Vue?

Answer 1

You could achieve this behavior by using the composition API function reactive and the utility toRefs with setup option as follows :
<script>
import { reactive, toRefs, computed } from "vue";
export default {
setup() {
const form = reactive({
firstName: "aa",
lastName: "bb",
});
const name = computed(() => form.firstName + " " + form.lastName);
return { ...toRefs(form), name };
},
};
</script>
<template>
<div id="app">
<form>
<label>
First:
<input type="text" v-model="firstName" />
</label>
<label>
Last:
<input type="text" v-model="lastName" />
</label>
</form>
<div>You are: {{ name }}</div>
</div>
</template>
LIVE DEMO
in script setup syntax just destruct the object returned from toRefs and properties will be exposed directly to the template :
<script setup>
import { reactive, toRefs, computed } from "vue";
const form = reactive({
firstName: "aa",
lastName: "bb",
});
const name = computed(() => form.firstName + " " + form.lastName);
const { firstName, lastName } = toRefs(form);
</script>
Options API example
This is an example of splatting/spreading a prop inside a component into data attributes. It uses a "model object" containing the data, which is likely unidiomatic Vue code, but might be more familiar to people coming from KnockoutJS:
const { createApp, ref, markRaw } = Vue;
class MyModelObject {
constructor() {
this.valueA = ref();
this.valueB = ref();
// prevent Vue from making instances of this class
// deeply reactive when they are assigned to the root
// components `data`
markRaw(this);
}
};
const MyComponent = {
props: {
object: Object
},
data() {
return { ...this.object };
},
template: document.querySelector("template")
};
createApp({
components: {
MyComponent: MyComponent
},
data() {
return {
object: null
};
},
created() {
this.object = new MyModelObject();
this.object.valueA.value = "foo";
this.object.valueB.value = "bar";
}
}).mount(document.querySelector("main"));
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<main>
<my-component :object="object"></my-component>
</main>
<template>
{{ valueA }} {{ valueB }}
</template>

Answer 2

As long as you don't have repeated values, you could alias it to a computed property like
computed: {
firstName: function() {
return form.firstName
},
lastName: function() {
return form.lastName
}
}