VueJS: how to create a condition for a v-model?

Question

VueJS: how to create a condition for a v-model?

Navigation

#1 by (1 votes)
#2 by (0 votes)

4

The problem is this, I have a switch done with label and input checkbox and it has a default value that comes from the date of my Vue instance.

var app = new Vue({
    el: '#app',
    data: {
        slcModalidad: 0,
        chkPosNet: true,
    },

<label for="chkAllowPosNet" class="label-chk-allow">
     <input type="checkbox" id="chkAllowPosNet" name="chkAllowPosNet" v-model="chkPosNet">
          <div class="allow-text"></div>
          <div class="allow-toggle"></div>
</label>

But I need the default value of the chkPosNet variable to go through a condition to determine whether it is true or false, which in my example would be if slcModality was greater than 2. What would be the best way to do this?

I thought about leaving chkPosNet as null and creating a method to do the check, but I was confused if I did the methods, computed, mounted .... or if I can do a v-if for the v-model.

vue.js

asked by anonymous 04.09.2017 / 22:18

2 answers

1

Your watcher works, but I find it more appropriate to turn chkPosNet into a computed property:

var app = new Vue({
    el: '#app',
    data: {
        slcModalidad: 0
    },
    computed: {
        chkPosNet: function() {
            return this.slcModalidad <= 1;
        }
    },
    ....

05.09.2017 / 20:34

Ruby Bematech integration (or similar) Question: how to use python scripts for web?

score 0 · Accepted Answer

I solved my problem in the following way, I created a watcher to observe the variable slcModalidad and did a verification inside it:

watch: {
            slcModalidad: function(){
                if(this.slcModalidad > 1){
                    this.chkPosNet = false
                }
            },
        },