How to resolve this issue in Vuejs?

Question

I am working on vue@1.0.28 version. I trying to use v-if, v-else-if..... but not work.

Example:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

It prints all condition values.

Does vuejs support v-elseif blocks in version 1?

Answer 1

As per official vue documentation v-else-if is added in 2.1.0+ version and you are using old version of vue.please update your vue version. Refer this: https://v2.vuejs.org/v2/guide/conditional.html#v-else-if

Answer 2

You can use this:

<div v-if="type === 'A'">
  A
</div>
<div v-if="type === 'B'">
  B
</div>
<div v-if="type === 'C'">
  C
</div>
<div v-if="type !== 'A' && type !== 'B' && type !== 'C'">
  Not A/B/C
</div>