[Vuejs]-Vue.JS for loop producing confusing results

by

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>
👤Matt Schlosser

3👍

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.

👤wittgenstein

0👍

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

👤LastM4N

Leave a comment