0

Estoy intentando modificar el valor de routing desde el componente hijo (First) al hacer clic pero no pasa nada

//- 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>

En la consola no me sale ningun error, gracias.

1 respuesta 1

1

Se esta modificando pero no lo ves actualizado porque el hijo muestra el valor del prop y te falto pasarle el prop al padre, entonces usa el default del Boolean que es false.

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

Otra forma de hacer lo que quieres lograr, es usar v-sync, que es lo mismo que haces, pero en vez de tener un custom event, emites un evento update:nombreDelProp y le agregas el modificador .sync al prop en el padre.

//- 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>

Documentación de v-sync: https://es.vuejs.org/v2/guide/components-custom-events.html

Ejemplo con tu código: https://codesandbox.io/s/peaceful-blackwell-epfcj?file=/src/App.vue

3
  • Intente de las 2 maneras pero sigue sin cambiar
    – qwerty
    Commented el 26 jul. 2020 a las 21:55
  • Tienes vue devtools para ver si la data esta cambiando?
    – larizzatg
    Commented el 26 jul. 2020 a las 22:01
  • Gracias ya me funciono.
    – qwerty
    Commented el 26 jul. 2020 a las 22:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.