[Vuejs]-How to edit the data value of the parent component from the child component in vue js

by

0👍

✅

The solution is to use event emitting (Youtube Tutorial) to send updated data up to the parent component from the child component.
so the code becomes like this:
the parent component:

<template>
  <div>
    <button @click="show?show = false:show = true">
      {{show?"Hide":"Show"}}
    </button>
    <item :show="show" @state="update($event)" />
  </div>
</template>

<script>
import item from "item.vue"

export default {
  components: {
    item
  },
  data() {
    return {
      show: null,
    };
  },
  methods: {
    update(value) {
      this.show = value;
    }
  }
};
</script>

the child component:

<template>
  <div @click="action" v-if="show">
    Vue Js - click here to Hide
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean,
  },
  methods: {
    state() {
      if (this.show) {
        return false;
      } else {
        return true;
      }
    },
    action() {
      this.$emit("state", this.state())
    }
  }
};
</script>

Thank you @D.Schaller for helping

Leave a comment