//inputtwo.vue <template> <div><input type="checkbox" v-model="checked" />one</div> </template> <script> export default { name: "inputtwo", components: {}, data() { return {}; }, }; </script> //maincontent.vue <template> <div> <div class="container" id="app-container" v-if="!checked"> <p>Text is visible</p> </div> <common /> </div> </template> <script> export default { name: "maincontent", components: {}, data() { return { checked: false, }; }, methods: { hidecont() { this.checked = !this.checked; }, }, }; </script> //inputone.vue <template> <div><input type="checkbox" v-model="checked" />one</div> </template> <script> export default { name: "inputone", components: {}, data() { return {}; }, }; </script>Cómo ocultar el contenido de la casilla de verificación de diferentes componentes en Vuejs
Tengo tres componentes llamados inputone (contiene la casilla de verificación con el modelo v), inputtwo (contiene la casilla de verificación con el modelo v), contenido principal (que tiene algo de contenido y lógica), así que cuando el usuario hace clic en las casillas de verificación de cualquiera de las casillas de verificación (uno, dos) . Debería ocultar el contenido.
Enlace Codesanfdbox https://codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/maincontent/maincontent.vue
código de referencia:- https://codepen.io/dhanunjayt/pen/mdBeVMK
En realidad, no está sincronizando los datos entre los componentes. El contenido principal verificado nunca cambia. Debe comunicar datos entre los componentes principal y secundario o esto no funcionará. E intente usar componentes reutilizables como en lugar de crear inputone y inputtwo para la misma casilla de verificación, cree un componente de casilla de verificación genérico y pásele accesorios. Es una buena práctica y mantiene el código base más manejable a largo plazo.
aplicación.vue
<template> <div id="app"> <maincontent :showContent="showContent" /> <inputcheckbox text="one" v-model="checkedOne" /> <inputcheckbox text="two" v-model="checkedTwo" /> </div> </template> <script> import maincontent from "./components/maincontent/maincontent.vue"; import inputcheckbox from "./components/a/inputcheckbox.vue"; export default { name: "App", components: { maincontent, inputcheckbox, }, computed: { showContent() { return !(this.checkedOne || this.checkedTwo); }, }, data() { return { checkedOne: false, checkedTwo: false, }; }, }; </script>componente de casilla de verificación:
<template> <div> <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)" /> {{ text }} </div> </template> <script> export default { name: "inputcheckbox", props: ["value", "text"], }; </script>Contenido:
<template> <div class="container" id="app-container" v-if="showContent"> <p>Text is visible</p> </div> </template> <script> export default { name: "maincontent", props: ["showContent"] } </script>https://codesandbox.io/embed/confident-buck-kith5?fontsize=14&hidenavigation=1&theme=dark
Espero que esto ayude y que pueda aprender a pasar datos entre componentes principales y secundarios en la documentación de Vue: https://vuejs.org/v2/guide/components.html