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

Admin 1
Viewed 519

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

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

vue.js javascript
2 Answers

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 or this won't work. And try using reusable components like instead of creating inputone and inputtwo for same checkbox create a generic checkbox component and pass props to it. It is a good practice and keeps the codebase more manageable in the longer run.

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>

Content:

  <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

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

user_174047050

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.

user_82261140
Related