v-if multiple expressions?

[gapipro]

So how can I use v-if with multiple conditions?

v-if="!lock || status== 'ok' "

This is currently not working.

Any workarounds?

[ljonathanl]

Have you tried computed properties http://vuejs.org/guide/computed.html ?

[gapipro]

Yes I am trying it right now, but computed value doesn't get updated when one of conditions change.

activeteLock: {
      // the getter should return the desired value
      $get: function () {
           return this.lock || this.status;
      }
}

[ljonathanl]

you need to reference explicitly all the variables, because if this.lock is true at first pass this.status is not observed, see the end of the link above.

      $get: function () {
           this.lock;
           this.status;
           return this.lock || this.status;
      }

[gapipro]

Yes this works. Thank you.

[JohnSmith0602]

v-if multiple expressions seem to be supported now. I tried it on 0.11.0, it worked as expected!

[mithublue]

@JohnSmith0602 will u please share the code ?

[ShahanurSharif]

can you take a look at this, I am trying to make it happen, but not working
http://jsbin.com/cocavu/edit?html,js,output

[ludo237]

@JohnSmith0602 To be fair v-if shouldn't be use for complex expression, that's why there are computer properties

@MicroDreamIT Here we go fixed . You shouldn't use issues for your personal problems even because it wasn't related to v-if anyway

[mqliutie]

Hi , I have same problem.
I want realize <span v-if="support || isOrganizer">will be shown</span>
If write like above It can not work.
If I use computed property It can show but when I refresh browser It is gone.

computed: {
    show: function () {
        this.support;
        this.isOrganizer;
        return this.support || this.isOrganizer;
    }
},

or

computed: {
    showOrders: {
        $get : function(){
            this.support;
            this.isOrganizer;
            return this.support || this.isOrganizer;
        }
    }
}
//This can not work!

So how can I solve it? Thanks

[gapipro]

@mqliutie if you are using latest version then <span v-if="support || isOrganizer">will be shown</span>should work as expected.

But in case you are not try with <span v-if="(support || isOrganizer)">will be shown</span>

Adding () makes that whole condition a normal JS expression that is resolved on execution.

[mqliutie]

I have used vue-cli generator.
In app.vue have two components like below:

<ing :result="result"></ing>
<ends :result="result"></ends>

This is ing.vue:

<span v-if="(support || isOrganizer)">true</span>    
<span v-else>false</span>

props:['result'],
data :function(){
 return {
   support:false,
   isOrganizer:false
 }
}
watch:{
    result :function(newVal,oldVal){
         this.support = newVal.support;
         this.isOrganizer = newVal.isOrganizer
    }
}

Although I used () if I refresh this page Neither true nor false was gone.

Vue version is 1.0.21.
Thanks for your reply.

[gapipro]

@mqliutie you must be doing something wrong. Check my fiddle: http://jsfiddle.net/e0wpy14z/1/

I recommend upgrading to 1.0.26

[mqliutie]

I have found my mistake. I set value to a variable that wasn't initialized. So the value is not show at first