[Vuejs]-Vue.js v-show function with data parameter

by

0👍

✅

Button without a method

To complement the existing answer, since this case is a simple toggle, you can reduce the amount of code by getting rid of the method showDiv entirely. This should not be used if you have more complex logic since it could compromise readability: https://jsfiddle.net/8pLfc61s/

HTML:

<div id="demo">
    <button @click="showParagraph = !showParagraph">Toggle paragraph with button</button>
    <p v-if="showParagraph">Hello!</p>  
</div>

JS

var demo = new Vue({
    el: '#demo',
    data: {
        showParagraph: false
    }
})

Checkbox with v-model

Another cool trick is to use a checkbox with v-model, although in this case the amount of markup is increased, so probably not a worthy tradeoff: https://jsfiddle.net/v09tyj36/

HTML:

<div id="demo">

    <label class="button">
      Toggle Paragraph with checkbox
      <input type="checkbox" v-model="showParagraph">      
    </label>

    <p v-if="showParagraph">Hello!</p>  
</div>

JS

var demo = new Vue({
    el: '#demo',
    data: {
        showParagraph: false
    }
})
👤aristidesfl

0👍

Here’s a fiddle that replicates what you’re trying to to: https://jsfiddle.net/9wmcz2my/

HTML:

<div id="demo">
    <button @click="showDiv('showParagraph')">Click me</button>
    <p v-if="showParagraph">Hello!</p>  
</div>

JS

var demo = new Vue({
    el: '#demo',
    data: {
        showParagraph: false
    },
    methods : {
        showDiv: function(param){
       this[param] = !this[param]
    },
    }
})
👤Dave Sottimano

Leave a comment