Vue.JS for loop producing confusing results - vue.js

Question

Trying some vue.js for the first time and I've run into a weird issue. Right now my goal is to style text using a unique color for lines in a play spoken by different characters, here's my code:
<div id="app">
<ul>
<li v-for="part in scene">
<span v-if="part.character = 'MACBETH'">
<p>{{part.character}}</p>
<p v-bind:style="'color:red;'" >{{part.dialogue}}</p>
</span>
<span v-else-if="part.character = 'LADY MACBETH'">
<p>{{part.character}}</p>
<p v-bind:style="'color:blue;'" >{{part.dialogue}}</p>
</span>
</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?"}
]
//Next line
//MACBETH
//Prithee, peace:
//I dare do all that may become a man;
//Who dares do more is none.
}
});
</script>
The intended result is that Macbeth's lines appear in red and Lady Macbeth's lines appear in blue, however as it currently functions my output looks like this:
The character name is being changed and all the text is red rather than blue for Lady Macbeth's lines.
Any pointers? I'm brand new to this so still trying to figure out the basics.

Answer 1

You should look at the vue documentation - how you would style elements based on conditions. You could use the :style binding or the :class binding like this:
Vue.createApp({
data() {
return {
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?"}
]
}
},
methods: {
}
}).mount('#demo')
.red {
color: red;
}
.blue {
color: blue;
}
<script src="https://unpkg.com/vue#next"></script>
<div id="demo" class="demo">
<ul>
<li v-for="part in scene" :key="part.id">
<p>{{ part.character }}</p>
<p :class="[
{ 'red': part.character === 'MACBETH' },
{ 'blue': part.character === 'LADY MACBETH' }
]" >{{part.dialogue}}</p>
</li>
</ul>
</div>
With this approach you can remove your if/else conditions to keep your template clean.

Answer 2

You need to use == instead of = when comparing two values in the v-if/v-else-if directives.
<div id="app">
<ul>
<li v-for="part in scene">
<span v-if="part.character == 'MACBETH'">
<p>{{part.character}}</p>
<p v-bind:style="'color:red;'" >{{part.dialogue}}</p>
</span>
<span v-else-if="part.character == 'LADY MACBETH'">
<p>{{part.character}}</p>
<p v-bind:style="'color:blue;'" >{{part.dialogue}}</p>
</span>
</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?"}
]
//Next line
//MACBETH
//Prithee, peace:
//I dare do all that may become a man;
//Who dares do more is none.
}
});
</script>

Answer 3

The surprising thing with the answers is that none has added the very important v-for attribute -> key.
Even if it's not that the issue of this missing attribute, however it is recommended always the key to be added as a best practise.
If each iterated item has an id you can do this:
v-for="part in scene" :key="part.id"
or alternatively use the index
v-for="(part,index) in scene" :key="part.index"
More info here