[Vuejs]-Vue3 siblings communication: issue with consistency

by

-1👍

✅

You need to considerate an store to solve comunnication between sibling components, like:

stores/form.js

export const form = ref({
    field1: '',
    field2: '',
    resetFields() {
        this.field1= '';
        this.field2= '';
    }
});

ToolsBar.vue

import {form} from "../stores/form.js"

// ...

<button @click="form.resetFields()"> Reset </button>

InputsComponent.vue

<script setup>
import {form} from "../stores/form.js"

</script>

<template>
  <main>
    <input type="text" v-model="form.field1" /> 
  </main>
</template>

However, for large application it’s better to use an state managment like pinia.

👤Hans Felix Ramos

Leave a comment