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