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
    el 26 jul. 2020 a las 21:55
  • Tienes vue devtools para ver si la data esta cambiando?
    – larizzatg
    el 26 jul. 2020 a las 22:01
  • Gracias ya me funciono.
    – qwerty
    el 26 jul. 2020 a las 22:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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