javascript - v-else-if not working in vuejs : Failed to resolve directive: else-if - Stack Overflow

admin管理员组

文章数量:1291562

I am using "if" and "else-if" but is giving me pilation error.

[Vue warn]: Failed to resolve directive: else-if

this is my code

var app = new Vue({
  el:"#app",
  data:{
      lab_status : 2
  }
});

<script src=".1.1/jquery.min.js"></script>
<script src=".0.28/vue.js"></script>
<div id="app">
  <span v-if="lab_status==0">Inactive</span>
  <span v-else-if="lab_status==1">Active</span>
  <span v-else>Expired</span>
</div>

I am using "if" and "else-if" but is giving me pilation error.

[Vue warn]: Failed to resolve directive: else-if

this is my code

var app = new Vue({
  el:"#app",
  data:{
      lab_status : 2
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/vue/1.0.28/vue.js"></script>
<div id="app">
  <span v-if="lab_status==0">Inactive</span>
  <span v-else-if="lab_status==1">Active</span>
  <span v-else>Expired</span>
</div>

Please help me to resove this.

• javascript
• vue.js
• vue-directives

Share Improve this question Follow asked Jul 17, 2017 at 11:55 devendradevendra 2111 gold badge11 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I think you have some wrong use of v-if and v-else.

Please check if you have a tag with v-if and v-else at the same time.

<span v-else v-if="lab_status==1">Inactive</span>

You can use v-else-if instead.

v-else-if is added in vue 2.1.0 but you are using version 1.0.28, that's why the error, update the vue version or use v-if only

<span v-if="lab_status==0">Inactive</span> 
<span v-if="lab_status==1">Active</span> 
<span v-if="lab_status!=1 && lab_status!=0">Expired</span>

See v-else-if

From this document v-else-if directive

New in 2.1.0

So update your vuejs version

For now you can use only v-if and v-else

<span v-if="lab_status==0">Inactive</span>
<span v-if="lab_status==1">Active</span>
<span v-if="lab_status!=0&&lab_status!=1">Expired</span>

Note: In your case you have to use v-if only. If you use v-else, then for lab_status=0 both Inactive and Expired will display.

本文标签： javascriptvelseif not working in vuejsFailed to resolve directive elseifStack Overflow