Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name:

I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during the conditional check.

Kindly inform me if there is any mistake in my conditional check implementation.

<div id="app">
        <ul>
            <li v-for="part in scene">
                <div v-if:"part.character === 'MACBETH'">
                <span style="color:red">{{part.character}}</span>
                <p style="color:red">{{part.dialogue}}</p>
                </div>
                <div v-else-if:"{{part.character}} === \"LADY MACBETH\"">
                <span style="color:blue">{{part.character}}</span>
                <p style="color:blue">{{part.dialogue}}</p>
                </div>
                <div v-else>
                <span>{{part.character}}</span>
                <p>{{part.dialogue}}</p>
                </div>
            </li>
        </ul>
    </div>
    
    <script>
    var app = new Vue({
        el: '#app',
        
        data:{
            //Scene from http://shakespeare.mit.edu/macbeth/macbeth.1.7.html
            scene:[
                {character:'MACBETH', dialogue:"Hath he ask'd for me?"},
                {character:'LADY MACBETH', dialogue:"Know you not he has?"},
                {character:'MACBETH', dialogue:"We will proceed no further in this business:\nHe hath honour'd me of late; and I have bought\nGolden opinions from all sorts of people,\nWhich would be worn now in their newest gloss,\nNot cast aside so soon."},
                {character:'LADY MACBETH', dialogue:"Was the hope drunk\nWherein you dress'd yourself? hath it slept since?\nAnd wakes it now, to look so green and pale\nAt what it did so freely? From this time\nSuch I account thy love. Art thou afeard\nTo be the same in thine own act and valour\nAs thou art in desire? Wouldst thou have that\nWhich thou esteem'st the ornament of life,\nAnd live a coward in thine own esteem,\nLetting 'I dare not' wait upon 'I would,'\nLike the poor cat i' the adage?"}   
            ]
        }
        
    });
    </script>

Error Logged on Console

vue.js:634 [Vue warn]: Error compiling template:

tag <li> has no matching end tag.

1  |  <div id="app">
2  |        <ul>
3  |            <li v-for="part in scene">
   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^
4  |                  <div v-if:"part.character="==" 'macbeth'="">
5  |                <span style="color:red">{{part.character}}</span>

(found in <Root>)

Answer №1

There are a few mistakes in the code you provided

Here is the corrected version:

<div id="app">
  <ul>
    <li v-for="part in scene">

 <!-- <div v-if:"part.character === 'MACBETH'"> -->
               ^
      <div v-if="part.character === 'MACBETH'">

        <span style="color:red">{{part.character}}</span>
        <p style="color:red">{{part.dialogue}}</p>
      </div>

 <!-- <div v-else-if:"{{part.character}} === \"LADY MACBETH\""> -->
                    ^ ^^              ^^     ^^            ^^
      <div v-else-if="part.character === 'LADY MACBETH'">

        <span style="color:blue">{{part.character}}</span>
        <p style="color:blue">{{part.dialogue}}</p>
      </div>
      <div v-else>
        <span>{{part.character}}</span>
        <p>{{part.dialogue}}</p>
      </div>
    </li>
  </ul>
</div>

Answer №2

Your v-if conditions need adjustment. The correct syntax is to use = in v-if= and v-else-if=, instead of : in v-if:.

Answer №3

It appears that there are some mistakes in the code you provided. Here are a few things to correct:

  1. Make sure to use = instead of : in the v-if and v-else-if statements.

  2. The line

    v-if="{{part.character}} === \"LADY MACBETH\""
    seems incorrect. Remove the curly braces from {{ }} and replace them with single quotation marks around 'LADY MACBETH' for proper comparison.

If there are any other issues, please let me know.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
        <ul>
            <li v-for="part in scene">
                <div v-if="part.character === 'MACBETH'">
                <span style="color:red">{{part.character}}</span>
                <p style="color:red">{{part.dialogue}}</p>
                </div>
                <div v-else-if="part.character === 'LADY MACBETH'">
                <span style="color:blue">{{part.character}}</span>
                <p style="color:blue">{{part.dialogue}}</p>
                </div>
                <div v-else>
                <span>{{part.character}}</span>
                <p>{{part.dialogue}}</p>
                </div>
            </li>
        </ul>
    </div>
    
    <script>
    var app = new Vue({
        el: '#app',
        
        data:{
            //Scene from http://shakespeare.mit.edu/macbeth/macbeth.1.7.html
            scene:[
                {character:'MACBETH', dialogue:"Hath he ask'd for me?"},
                {character:'LADY MACBETH', dialogue:"Know you not he has?"},
                
                // More dialogues here...
  
            ]
        }
        
    });
    </script>

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

Issue with PLUploader in ASP.Net/JQuery: "Add Files" button not functioning post image upload操作

Hello, I've been utilizing the PLUploader controller for ASP.NET in C#. Initially, it works as intended, but after uploading files, the "add files" button becomes disabled or stops working, preventing me from adding more images. Can anyone offer assi ...

What is the best way to determine which cell is selected in a Quasar table?

Is there a way to determine which cell is selected in a Quasar table? I am trying to create functionality where, upon identifying the selected cell, if the user clicks on a custom button, I can pass the information of the selected cell to a pop-up page. ...

How come I am unable to pass JavaScript values to my PHP5 code?

I'm struggling with this code snippet: <?php $html=file_get_contents('testmaker_html.html'); echo $html; ?> <script type="text/javascript"> document.getElementById('save_finaly_TEST').addEventLis ...

VueJS is equipped with the functionality to allow multiple items

I attempted to implement multiple select functionality with select2 in a Laravel project. The data for userRoles is retrieved from the User model, which has a relationship with roles. On the other hand, allRoles consists of all the roles present in the Rol ...

Encountering a Runtime Exception while setting up a Client Component in the latest version of Next JS (v13.3

I am facing an issue with a component in my Next JS website. When I attempt to convert it into a Client Component, the page fails to load in the browser and I encounter the following unhandled runtime exception: SyntaxError: "undefined" is not va ...

What is the best way to access the inner html of every cell within a table row that I have selected?

I want to implement a feature on my website where users can click a "save" button on a specific row in a table and save the entire row's innerHtml onto another page as their favorite hiking trails. I've been trying to achieve this by adding clic ...

The Mongoose connection keeps failing to reconnect and maintain a stable heartbeat

I am facing an issue with the automatic reconnection feature in mongoose on my project. Despite configuring it to reconnect after a certain interval, it does not work as expected. Even if the credentials are correct, mongoose should attempt to log in perio ...

What are the best practices for utilizing databases with both Javascript and JSF frameworks?

I am currently following the recommendations provided by @BalusC, with additional guidance available here. (The reason I'm posting this here is because it's not related to my previous question). My goal is to retrieve data from my database and d ...

Fade In and Contemplate CSS, Not Effective

Hey there! I'm trying to achieve a similar effect like the one shown in http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. The issue is that the reflection of the image isn't displaying as it should. I've tried inspecting the ele ...

integrating live html content into dompdf with php

Hey there, I'm currently working on a script that dynamically loads HTML using the file_get_contents function and then generates and saves the PDF on the server. However, I'm running into a problem where my PHP file is throwing a 500 internal ser ...

Conceal HTML elements from the bottom as new content is being added dynamically

I am currently working on a comments feed feature. By default, only the first four comments are displayed, with an option to show more when clicking the "show more" anchor. The issue I'm facing is that if new comments are dynamically added, the CSS hi ...

Display a list of dates within a specified range using the ng

Utilizing the ng-repeat directive to connect data with a filter for name search: <div ng-repeat='myoldrecs in myoldrec | filter:q as results '>......</div> $scope.myoldrec = [{name:ccc,date:13-02-2016},{name:ddd,date:14-02-2016}]; &l ...

Can the grunt command be executed automatically after saving code in TypeScript?

As a newcomer to FrontEnd and JavaScript coding in TypeScript, I find myself constantly needing to follow these steps after making a code change: save the code -> compile it using Grunt -> reload the webpage. It can be quite time-consuming. Is there ...

Retrieve a collection of CSS classes from a StyleSheet by utilizing javascript/jQuery

Similar Question: Is there a way to determine if a CSS class exists using Javascript? I'm wondering if it's possible to check for the presence of a class called 'some-class-name' in CSS. For instance, consider this CSS snippet: & ...

Exploring the effects of zooming on YouTube videos in Firefox

Strange phenomenon, but my website appears to be having display issues specifically on Firefox. Surprisingly, it looks perfectly fine on IE9, Safari, and Chrome. The layout of the site in Firefox seems to change when I zoom in or out, resulting in the You ...

Mongodb will provide the previous collection

router.post('/orders/finish', function(req, res, next) { var order_id = req.body.order_id; var user_id = req.body.user_id; var table_id = ''; var result = []; mongo.connect(url, function(err, db) { assert.equal(null, err); ...

Changing the source of the Carousel image in HTML when it is the active image

I have a unique setup with two carousels on a single page. My goal is to change the src of the first item in the carousel when the second item is clicked. Here is the code for the second carousel item: <div style="max-width: 20%; max-height: 20%;" cl ...

What is the best method for transmitting additional information to an API?

Hey everyone, I'm currently struggling to send the shipping address to api/checkout. I attempted to send the body as an object with the cart details and shipping address as object properties, but that approach didn't yield any results. Is there a ...

Animating a mesh in three.js with color transitioning using tween.js

I've been struggling to accomplish this task. My goal is to change the color of a ConvexGeometry mesh when hovered over. So far, I can successfully change the mesh's color without any issues. The problem arises when I attempt to create a smooth ...

Retrieving previous data following an AJAX request using the GET method in Laravel 5.5

I have encountered an issue while using two ajax calls on a single page. On one side, I am making an ajax post request to store data and submit color in a database called "color_store." On the other side, I am trying to retrieve all the colors from that ta ...