Vue: v-if with v-show on computed property not working

[obonyojimmy]

i have below component :

<template>
   <ul  v-if="subroutes" class="nav child_menu" v-show="checknavstat" >
    <li v-for="subroute in subroutes" >
        <a v-link="{name : subroute.name , activeClass: 'active'}"  >{{subroute.name}}</a>
    </li>
  </ul>

</template>

<script>


module.exports = {

     props: {

        subroutes: {
          type: Object
        },
        routename: {
          type: String
        }

    }, 
   computed: {


   currentroute: {
    cache: false,
    get: function () {
      var self = this 

       return this.$root.$router._currentRoute.name
    }
   },
    checknavstat:  {
        cache: false,
        get: function () {
            var self = this 
            var ret = false

            if(self.currentroute == self.routename){
                ret = true
            }

           return ret
        },
        set: function (newValue) {
             var self = this 
            console.log(newValue)
         return newValue
      }

    }
  }

}
</script>

Issue : Though checknavstat is true from console end , v-show does not render html ,

is it something am missing or bug ?

[dan-gamble]

Is subroutes true as well? If it's not rendering HTML it could be because that is false.

I made a really simple example of using v-if and v-show together, if you click the vif toggle then the vshow toggle the <ul> shows.

http://www.webpackbin.com/EkB1mbEZb

[posva]

Hi!

Please make sure to to ask the question on the forums or the gitter chat. You'll get faster feedback. We want to keep questions out of issues :smile:

As for your question your computed property is so complicated while it's just a return this.currentroute === this.routename. Next time take the time to provide a reproduction in a jsfiddle, please

[obonyojimmy]

@posva , thats for clarification , however i do think this must be a bug either on v-show template rendering with computed properties , ie my computed property returntrue which means the v-show should display the content , but its not , have also tested same with v-bind:class which also behaves the same , kindly check here is link to webpack bin http://www.webpackbin.com/Vk2_RdNbb

[posva]

@obonyojimmy I'm pretty sure the thing failing is return self.$root.$router._currentRoute.name the property is not being watched by the component. You can access the route with this.$route.name
If that's not the problem provide a narrower example, your _repro_ is actually too big and difficult to check

Give a look at http://vuejs.org/guide/reactivity.html#Inside-Computed-Properties it may help you understand

[Bobz-zg]

Better late then never.
I think that v-if and computed properties/watchers don't work 100% accurate if markup that needs to be hidden/shown is similar, or same.

I had <div v-if="cart.hasItems"> multiple times in my cart panel, but the last section which holds buttons didn't work.

So I had this code:

<div v-if="cart.hasItems" class="span-next span-gocheckout">
    <button
        class="btn btn-blue-white"
        type="button"
        data-slide="checkout"
    >
        Checkout
    </button>
</div>
<div v-else class="span-next span-goshop">
    <button
        class="btn btn-blue-white"
        type="button"
        data-slide="shop"
    >
        Go Shopping
    </button>
</div>

and only what was updated was parent div.
I noticed that when I added different CSS class to .span-next to see if anything is going on.
Then I noticed parent div did got updated, but button inside remained exact same.

I've tried with adding ID, but that didn't help, not sure is it possible to add some kind of index like in v-for.
So 3 parent divs that had same declaration .. v-if="cart.hasItems" .. were shown/hidden as expected, only the last one that had almost exact markup didn't update when I add/remove item from cart.
Not sure is this is known/expected behaviour or not though.