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

A peculiar quirk with Nuxt.js radio buttons: they appear clickable but are somehow not disabled

I’m having an issue with a radio button that won’t check. It seems to be working fine on other pages, but for some reason it just won't click here. <div class="form-group"> <label class="control-label&q ...

What is the best way to use toggleClass on a specific element that has been extended

I have been experimenting with this code snippet for a while. The idea is that when I hover my mouse over the black box, a red box should appear. However, it doesn't seem to be working as expected. Could someone please review this script and let me k ...

Trouble with Title Updating in Next.js and Tailwind CSS Project

I am currently facing an issue with the title of my website not updating, even though I am using next/Head and have included the title tag. "use client"; import Head from 'next/head'; import { BsFillMoonStarsFill } from 'react-ico ...

The alert box in Javascript appears before the execution of the statement preceding it

I am encountering a peculiar issue, which is not unexpected considering my limited experience with JavaScript. I am currently working on developing a basic high-low card game where two cards are drawn and the highest card wins. Below you can find the code ...

What is the best way to leverage a webbrowser control for design purposes while keeping the functionality in C#?

Observing some apps, it seems they utilize HTML/CSS/Javascript for styling - a much simpler approach compared to crafting the same thing natively. However, these apps have their logic written in C#. Sadly, I am clueless on connecting the two. Research yiel ...

CSS media query to target specific viewport width

In my JavaScript code, I am dynamically creating a meta viewport. I set the value of this viewport to be 980px using the following script: var customViewPort=document.createElement('meta'); customViewPort.id="viewport"; customViewPort.name = "vie ...

Step-by-step guide on redirecting a page using AJAX while also sending data to a controller

Is it possible to redirect to another page after a successful action, but not able to retrieve the data that was passed? Here is the jQuery code: $.ajax({ type:'GET', url:link, data:data, success:functio ...

SlickGrid checkbox formatter/editor experiencing issues with data consistency

Exploring the functionalities of SlickGrid'seditors/formatters, I delved into how these features could potentially alter the data object utilized for constructing the grid (as modifications within the table are usually reflected in the original data o ...

Could someone please provide clarification on this specific JavaScript syntax? I am unsure about the usage of `const {

Although I am not very familiar with javascript, I have come across this syntax and I would greatly appreciate it if someone could help me understand it! Regarding Node.js const { check, validationResult } = require('express-validator/check') ...

Tips for reading user input in a terminal using node.js

Before deploying my code to the server, I'm looking to conduct some local node testing. How can I take terminal input and use it as an input for my JavaScript script? Is there a specific method like readline that I should be using? ...

Repairing the orientation in unique threejs capsule geometric shape

Exploring the realm of custom geometry in three.js, I decided to experiment with modifying Paul Bourke's capsule geometry example. However, as I delve into creating my own custom capsule geometry, I have encountered two main challenges: The orienta ...

What could be causing my component to not refresh when used as a child?

I have been experimenting with some code to track rerenders. The initial approach failed when passing <MyComponent> as a child component. it("should return the same object after parent component rerenders", async () => { jest.useF ...

"AngularJS offers a unique way to include alternative text in placeholders and titles using

I need to implement an input field (<input..>) with a placeholder and title for tooltip that functions in the following way: There is a variable called "myString" which can either be undefined/empty or contain a string. When empty, a default string ...

Pulling the month name based on a specific year and week using Javascript

In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...

What's the best way to ensure uniform spacing between the list items in this slider?

When using appendTo, I've noticed that the spacing between items disappears. I've tried adjusting the padding-bottom and left properties with no success. Does anyone have a suggestion for how to fix this issue? I'm at a standstill. $(&a ...

Encountering issue with accessing req.body within Next.js 13 middleware function

The issue I am facing in the code snippet below is related to validating the request body against a schema from zod. The current situation leads to failure and catches errors because req.body returns a ReadableStream<Uint8Array> instead of the expect ...

Generate a pair of dates and organize them in chronological order

Working on an application where the database response lacks a direct timestamp, causing data to render differently each day and requiring me to use .reverse() to fix my charts. I aim to implement a permanent solution using sort(), but struggling due to the ...

Types for Vue libraries

I am in the process of developing a Vue library as an NPM package with the intention of making it available for use in other projects. The main entry point is main.ts, which exposes a plugin and some commonly used functions. Here's a simplified examp ...

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

Splitting React Code - Loading additional component following initial page load

I've recently integrated Router-based code splitting (lazy loading) in my app. As far as I understand, with lazy loading, a user will only load a specific chunk of the complete bundle when visiting a page. Is there a way to instruct React to start lo ...