Home / Questions / 376406
Accepted
qwerty
Asked: 2020-07-27 11:06:36 +0800 CST 2020-07-27 11:06:36 +0800 CST

Modify data of a parent component from a child

  • 772

I am trying to modify the value of routingfrom the child component (First) on click but nothing happens

//- Padre
<template>
   <First @toggleContent="routing = !routing" />
</template>
<script>
export default {
  data() {
    return { routing: true }
  }
}
</script>

//- Hijo (First component)
<template>
  <div>
    <i class="bx bx-shape-triangle" @click="toggleContent()"></i>
    {{routing}}
  </div>
</template>
<script>
export default {
  props: {
    routing: Boolean
  },
  methods: {
    toggleContent() {
      this.$emit('toggleContent')
    }
  }
}
</script>

In the console I do not get any error, thanks.

vue.js

1 Answers

  1. Best Answer

    It is being modified but you don't see it updated because the child shows the value of the prop and you haven't passed the prop to the parent, so use the default Boolean which is false.

    <First :routing="routing" @toggleContent="routing = !routing" />

    Another way to do what you want to achieve is to use v-sync, which is the same thing you do, but instead of having a custom event, you emit an update:propName event and add the .sync modifier to the prop in the parent.

    //- Hijo (First component)
<template>
  <div>
    <i class="bx bx-shape-triangle" @click="$emit('update:routing', !routing)"></i>
    {{routing}}
  </div>
</template>
<script>
export default {
  props: {
    routing: Boolean
  }
}
</script>

//- Padre
<template>
   <First :routing.sync="routing" />
</template>
<script>
export default {
  data() {
    return { routing: true }
  }
}
</script>

    v-sync documentation: https://es.vuejs.org/v2/guide/components-custom-events.html

    Example with your code: https://codesandbox.io/s/peaceful-blackwell-epfcj?file=/src/App.vue

    • 1