3 

new Vue({
      el: '#selector',
      data: {
        checked: false,
        unchecked: true
      },
      methods: {
        hidecont() {
          this.checked = !this.unchecked;
        }
      });
<div id="selector">
  <div class="checkbox">
    <label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
  </div>
  <div class="container" id="app-container" v-if="unchecked">
    <p>Text is visible</p>
  </div>
</div>

I have toggled using method like check=!checkedd but still i am unable to hide the content.

Initially checkbox and text content should be visible. So once user clicked on checkbox, the content will be in hide.

Improve this question

3 Answers 3

Reset to default
1

data property must be function:

new Vue({
  el: '#selector',
  data() {
    return {
      checked: false,
    }
  },
  methods: {
    hidecont() {
      this.checked = !this.checked;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
  <div class="checkbox">
    <label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
  </div>
  <div class="container" id="app-container" v-if="!checked">
    <p>Text is visible</p>
  </div>
</div>

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

2 Comments

hey mate, check now, just set initial value of checked to true
i think i got it now mate, check my answer pls :)
1

Several variables are not required to handle this logic.
You can just save the 'checked' variable, and it's bidirectional binding, when checkbox is checked, it will be true.
Here is my code.

new Vue({
      el: '#selector',
      data: {
        checked: false,
      },
    })

<div id="selector">
  <div class="checkbox">
    <label><input type="checkbox" v-model="checked">Options</label>
  </div>
  <div class="container" id="app-container" v-if="checked">
    <p>Text is visible</p>
  </div>
</div>
Improve this answer

1 Comment

You can set the initial value of IsChecked to true.
0 
new Vue({
  el: '#selector',
  data() {
    return {
      checked: false,
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="selector">
  <div class="checkbox">
    <label><input type="checkbox" v-model="checked" @click="hidecont" >Options</label>
  </div>
  <div class="container" id="app-container" v-if="!checked">
    <p>Text is visible</p>
  </div>
</div>

I just replaced v-if="!checked" in content div

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.