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

Question

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

You want to hide Text is visible content when either of the checkboxes is selected? — Humayon Zafar
– Humayon Zafar, Commented Dec 4, 2021 at 10:05
Yes exactly. but in my case I have checkboxes in two different components. When user select either of the checkboxes. the content "Text is visible" should hide. — user17525310
– user17525310, Commented Dec 4, 2021 at 10:09
@HumayonZafar Can I achieve it like this ----- codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/… (Or) any alternative way of doing this? — user17525310
– user17525310, Commented Dec 4, 2021 at 10:47

tony19 · Accepted Answer · 2022-07-15 05:27:36Z

3

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

edited Jul 15, 2022 at 5:27

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 4, 2021 at 11:32

Humayon Zafar

1,1711 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user17525310 Over a year ago

Thanks I got the logic. But in my case, I have two components where checkbox are coming while looping the array values from two different components. I tried to place the checkboxes in two components namely inputone, inputtwo. But i am getting error. codesandbox.io/s/crimson-fog-wx9uo?file=/src/components/…

user17525310 Over a year ago

Tried to create inputone and inputtwo, and take individual component for checkbox. By following your code. But not working :( Not sure why

Humayon Zafar Over a year ago

What error are you getting? Can you please share it.

user17525310 Over a year ago

Getting error as :- Unknown custom element: <maincontent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

user17525310 Over a year ago

Here is the code :- codesandbox.io/embed/crimson-fog-wx9uo?file=/src/components/…

|

hoyski · Accepted Answer · 2021-12-04 16:41:28Z

0

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.

answered Dec 4, 2021 at 16:41

hoyski

3441 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related