Vue JS console template error "tag <li> has no matching end tag."

Question

Here is my code snippet, I am using to change the color depending on the name of the character

It gives an error that the li tag is not properly closed, but i see the tag is closed but i find some error during conditional check

Please let me know if I am doing something wrong in the conditional check

<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>

Console error

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

You have a few errors in your code

This should be correct:

<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

Some of your v-if statements are wrong. You're using : in v-if: when you should be using the = like v-if= and v-else-if= .

Answer 3

There are some errors in your code, maybe I'm missing something related to the implementation:

1. Use = in the v-if and v-else-if statement, you're using:, so change v-if: to v-if=, same for v-else-if

2. This line v-if="{{part.character}} === \"LADY MACBETH\"" is weird, you should use part.character , so remove the curly braces {{ }} , and also use 'LADY MACBETH' in order to have the comparison working

Let me know if maybe I'm missing something.

 <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?"}, {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>