Quiero mostrar u ocultar el elemento haciendo clic en el button o haciendo clic en el elemento mismo, por ejemplo:
<template> <div> <button @click="show?show = false:show = true"> {{show?"Hide":"Show"}} </button> <div @click="show?show = false:show = true" v-if="show"> Vue Js - click here to Hide </div> </div> </template> <script> export default { data() { return { show: null, }; } }; </script>pero quiero importar el elemento de otro componente, así que hago esto:
el componente principal:
<template> <div> <button @click="show?show = false:show = true"> {{show?"Hide":"Show"}} </button> <item :show="show" /> </div> </template> <script> import item from "item.vue" export default { components: { item }, data() { return { show: null, }; } }; </script>el componente hijo:
<template> <div @click="show?show = false:show = true" v-if="show"> Vue Js - click here to Hide </div> </template> <script> export default { props: { show: Boolean, } }; </script>pero claro, no funciona bien.
Cuando hago clic en el elemento, desaparece, pero el valor show en el componente principal no cambia y aparece un error que dice Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "show" .
Entonces, ¿cómo editar el valor de los datos del componente principal del componente secundario?
(Yo uso Vue 2.6.14)
La solución es utilizar la emisión de eventos (tutorial de Youtube) para enviar datos actualizados al componente principal desde el componente secundario. entonces el código se vuelve así: el componente padre:
<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>el componente hijo:
<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>Gracias @D.Schaller por ayudar