Vue 3: How to combine multiple ref

Question

How to combine multiple ref value in one:

        const variable1 = ref(false);
        const variable2 = ref('');
        const variable3 = ref(false);
        const variable4 = ref(false);           
        const variable5 = ref(false);
        const variable6 = ref(false);

manniL · Answer

You can use an object instead:

// Creation
const myValues = ref({
  someVar: true,
  otherValue: false
})

// In code somewhere
myValues.value.someVar = false

Instead you could also use reactive. Replacing the object isn't possibel then though.

Stefano Nepa · Answer

Have you checked reactive (ref. https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-reactive-state)?

const myReactiveVar = reactive({
       variable1 : false,
       variable2 : '',
       variable3 : false,
       variable4 : false,           
       variable5 : false,
       variable6 : false,
});

changing any field trigger your watchers or computed values

Vue 3: How to combine multiple ref

2 Answers