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>)
CodePudding user response:
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=
.
CodePudding user response:
There are some errors in your code, maybe I'm missing something related to the implementation:
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
This line
v-if="{{part.character}} === \"LADY MACBETH\""
is weird, you should usepart.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>
CodePudding user response:
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>