How to show or hide element with checkbox input in Vue?

Question

I am trying something like this:

<b-form-checkbox
  id="currently_working"
  v-model="currentlyWorking"
  value="true"
  unchecked-value="false">
    <span class="fs--1">
      I am currently working here
    </span>
</b-form-checkbox>
</b-form-group>
<p v-if="currentlyWorking">currently working</p>

However, something is going wrong here because the paragraph tag isn't toggling based on currentWorking state. Here is the codesandbox link : https://codesandbox.io/s/agitated-night-jnhxz?file=/src/components/HelloWorld.vue:43-361

Mahir Altınkaya · Accepted Answer · 2021-03-12 13:24:14Z

2

Try this. You need to for v-if boolean true and false but your component give you a string true and false. Good luck.

 <b-form-checkbox
        id="currently_working"
        v-model="currentlyWorking"
        :value="true"
        :unchecked-value="false"
        ><span class="fs--1">
          I am currently working here
        </span></b-form-checkbox
      >
 </b-form-group>

answered Mar 12, 2021 at 13:24

Mahir Altınkaya

4396 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

How to show or hide element with checkbox input in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related