Vue.js v-else-if directive not functioning properly: Unable to resolve directive: else-if

I am encountering a compilation error while using "if" and "else-if".

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

Here is the code I am working with:

var app = new Vue({
  el:"#app",
  data:{
      lab_status : 2
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>

Looking for assistance in resolving this issue.

Answer №1

It appears that there may be a misunderstanding with the usage of v-if and v-else in your code.

Make sure to review whether you have both v-if and v-else within the same tag.

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

Consider using v-else-if as an alternative solution.

Answer №2

v-else-if was introduced in vue 2.1.0, whereas your current version is 1.0.28. This is why you are encountering the error. To resolve this issue, either update your Vue version or stick to using 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>

For more information on v-else-if

Answer №3

According to this resource, the v-else-if directive is a new feature introduced in version 2.1.0 of Vue.js.

This functionality was added in version 2.1.0

If you are using an older version, make sure to update your VueJS to access this feature.

Currently, you can utilize only the v-if and v-else directives for conditional rendering.

<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 specific scenario, stick to using v-if. Using v-else may not produce the desired output when lab_status=0, as both "Inactive" and "Expired" will be displayed simultaneously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to enable drag and drop functionality on a dynamically created table using AJAX?

I have been successfully using the TableDnD plugin for drag and drop functionality on table rows. However, I am now facing an issue with dynamically generated tables via AJAX. The code doesn't seem to work as expected when it comes to drag and droppin ...

Looking for a way to extract information from two nested objects within an array by utilizing lodash, and then transferring it as a property to a react component

My react components require dynamic preloading of values from nested arrays within an array of data. import React, { useEffect } from "react"; export function loadComponent({ config, LayoutRenderer }) { const loadModules = (name) => q ...

Using JQuery selectors in conditional statements

In the context of my webpage, clicking on a tag filters and displays corresponding posts. I now need to handle pagination to navigate to the next set of posts. However, I am facing difficulties with the JavaScript if statement in jQuery, where I struggle ...

Attempting to move elements into an array for storage in the local storage

Is there a way to properly add elements to an array and store it in localstorage? Here's the code snippet I've been working with: const handleSelectLayouts = (layout) => { const layoutsArray = []; layoutsArray.includes(layout) ...

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

When working with ng-repeat in Angular 1 to display the index, this code is used: <div ng-repeat="car in cars"> <ul> <li>Index: {{$index+1}}</li> <li>Car Name:{{car.name}}</li> </ul> </div> However, w ...

Clicking through the button inside Vuetify's text-field append slot

While working on creating Vuetify's v-text-field with a slot named append containing a button, everything seems to be functioning correctly except for the fact that when I click the button, it goes through and focuses on the text field. On mobile devi ...

The code functions perfectly on my local machine, however it is not cooperating on the HostGator server

A selection box based on values should appear in text fields, The current code is functional in local host but not working on the hostgator server For example, displaying country options based on the selected state and districts based on the selected sta ...

What is preventing Protractor from detecting Angular on a site that has been automatically initialized with Angular?

Whenever I try to utilize browser.get() in my code, I encounter the following error: Error: Angular could not be found on the page http://localhost:5000/#/login debug=timing&saveLogs=true&displayAll=true : angular never provided resumeBootstrap A ...

What is the process for creating a local repository for Node.js npm?

When it comes to the building process in node js, there are a few goals that need to be called: Begin by calling npm install, which creates a folder called node_modules and places all dependencies from package.json into it. [for UI development] Execute a ...

Utilizing the LinkedIn API: Posting a network update using a variable value

Currently, I have a string variable and I am looking to post the value stored in this variable as a network update on LinkedIn. Could someone please provide guidance on how I can modify the code below to make this functionality possible? updateURL = "/pe ...

Achieving the minimum width of a table column in Material-UI

Currently I am in the process of developing a React website with Material-UI. One query that has come up is whether it's feasible to adjust the column width of a table to perfectly fit the data, along with some extra padding on both ends? Outlined be ...

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

Structure of a GraphQL project

What is the most effective way to organize a graphQL project on the server side? Here is my current project structure: src config models setup schema queries index userQuery resolvers index userRes ...

Display information from a .js file onto an HTML webpage

I'm completely new to the world of server-side development and I'm attempting to navigate it on my own. Currently, I have a server written in JavaScript using Express and I'm trying to display some content on my HTML page that was sent from ...

The click event triggered by the onclick clone/function may not always activate the click handler

As a newcomer in the JavaScript domain, I am encountering an issue where the first clone created after clicking 'add more' does not trigger my click me function. However, every subsequent clone works perfectly fine with it. What could be causing ...

VueJS search filter issue: 'search' property is not defined

Currently, I am in the process of developing an application that will consume JSON data and display it with a search filter feature, among other functionalities. I have attempted to create the necessary function for this task, however, it has not been suc ...

Having issues with Angular http.post not sending data when using subscribe

I'm currently facing an issue with sending data to my API using post.subscribe. Despite the fact that no errors are being thrown, the data is not being sent successfully. It's important to note that the API itself is functioning perfectly. Belo ...

React Datepicker on Safari: A seamless way to pick dates

While working on my application, I encountered an issue with the Form.Input functionality from Semantic UI React library. I am using it to insert dates and found that it displays a date-picker on Chrome and Firefox but not on Safari. I attempted to use the ...

Troubleshooting steps for resolving a node.js error during execution

I recently delved into server side programming with node.js, but I'm encountering some issues when trying to execute it. My server is set up at 127.0.0.1:80, however, I keep running into errors. Console: Server running at http://127.0.0.1:80/ node:ev ...

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...