The reactive object is wrapper object which another way to create variables in Composition API. It uses reactive() method to create reactive object, which is a wrapper object. It is similar to ref, it creates single property object with primitive type. It takes an object and returns a reactive proxy of the original object.
Create reactive instance
To create reactive instance in the component, reactive object needs to be imported from the vue package. It expects object to create its properties reactive.
1 const form = reactive({
2 username: "",
3 password: "",
4 });
Access and reset value to reactive
To access the value associated with the reactive variable, we can use its property name to access respective property of reactive object using dot (.) operator. To set the value we can use same property name with dot (.) operator and assign value.
Access and reset value to reactive
1
2 const current_value = [reactive_variable_name].property_name;
3
4 [reactive_variable_name].property_name = current_value;
Note: In Vue 3, All the members define inside the setup hook by default its private. If you want to access members, define inside setup, in the template, you have to expose those members from setup hook using return statement.
Reactive object in Vue component
1 <template>
2 <div>
3 <div>Username: <input v-model="form.username" /></div>
4 <div>Password: <input v-model="form.password" /></div>
5 <button @click="submit">Submit</button>
6 </div>
7 </template>
8
9 <script>
10 import { reactive } from "vue";
11
12 export default {
13 setup() {
14 const form = reactive({
15 username: "",
16 password: "",
17 });
18
19 const submit = () => {
20 console.log(form.username);
21 console.log(form.password);
22
23 form.password = "value reset";
24 };
25
26 return {
27 form,
28 submit,
29 };
30 },
31 };
32 </script>
In the above example, we have added setup method and returning object with two members, ref and submit which we have used in template. If component doesn't have shared data from parent component, it can be rewrite as below using setup attribute.
Reactive with setup attribute in Vue component
1 <template>
2 <div>
3 <div>Username: <input v-model="form.username" /></div>
4 <div>Password: <input v-model="form.password" /></div>
5 <button @click="submit">Submit</button>
6 </div>
7 </template>
8
9 <script setup>
10 import { reactive } from "vue";
11
12 const form = reactive({
13 username: "",
14 password: "",
15 });
16
17 const submit = () => {
18 console.log(form.username);
19 console.log(form.password);
20 form.password = "value reset";
21 };
22 </script>
In the above example, same component is written using setup attribute, with the help of setup attribute you don't have to add return statement by default members of the script element are accessible in the template.
Related options for your search