How to hide content when clicked checkbox from different components in vuejs?-CodePudding

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

How to hide content of checkbox from different components in Vuejs

I have three components called inputone(contains checkbox with v-model),inputtwo (contains checkbox with v-model),maincontent.(having some content and logic), So when user click on checkboxes from either one checckbox(one,two). i schould hide the content.

Codesanfdbox link https://codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/maincontent/maincontent.vue

reference code:- https://codepen.io/dhanunjayt/pen/mdBeVMK

CodePudding user response：

You are actually not syncing the data between components. The main content checked never changes. You have to communicate data between parent and child components for this won't work. And try using reusable components like instead of creating inputone and inputtwo for same checkbox create a generic component and pass props to it.

App.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>

checkbox component:

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

https://codesandbox.io/embed/confident-buck-kith5?fontsize=14&hidenavigation=1&theme=dark

Hope this helps and you can learn about passing data between parent and child components in Vue documentation: https://vuejs.org/v2/guide/components.html

CodePudding user response：

Consider using Vuex to store and maintain the state of the checkbox. If you're not familiar with Vuex, it's a reactive datastore. The information in the datastore is accessible across your entire application.