CODEWITHSUNDEEP
vue.js
wl.GIG
wl.GIG

Reputation: 316

vue: v-else does not completely show context

I am new to Vue. When I use v-if, v-else-if, and v-else, the first two tags work well. But for v-else, it only change the context in {{}}.

html:

<div id="app">
<div v-if="isIf === 1">
  isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
  isIf is 2：{{isIf}}
</div>
<div v-else>
  isIf is not 1 or 2：{{isIf}}
</div>
</div>

js:

  <script>
 var app = new Vue({
  el: '#app',
  data: {
    isIf: 1,
    isShow: false
  }
});
</script>

when I change the app.isIf=3 in console, it showed isIf is 2: 3. My last try is app.isIf=2, so it showed the context with last input. Any idea?

Upvotes: 0

Views: 46

Answers (1)

blaz
blaz

Reputation: 4068

Your v-else-if condition is wrong - instead of

<div v-else-if="2">

it should be

<div v-else-if="isIf === 2">

Except for zero, any numerical value will be considered "true" in Javascripts. So your render logic is always around "v-if" and "v-else-if", it never reaches "v-else"

Upvotes: 1

Related Questions