My state contains the following property:

sentences: [
    {
        text: "Go away and hide behind that door where we found you just now.",
        grade: 606
    },
    {
        text: "Please don't let anyone spoil these nice fresh flowers.",
        grade: 609
    },
]

Now I am trying to iterate over the sentences, create a new property on each sentence called words which will be an array of words. When I console.log(this.sentences), I see the new property but when I try to render the property in the DOM, it doesn't show the new property.

    mounted(){
        this.sentences.map((sentence) => {
            const arrayOfWords = sentence.text.split(' ');
            sentence.words = arrayOfWords
        })
        console.log(this.sentences)
    }

CodePudding user response：

Array#map returns:

A new array with each element being the result of the callback function.

Also, you need to add the value computed in each iteration:

Function that is called for every element of arr. Each time callbackFn executes, the returned value is added to newArray.

Therefore, to get the updated version, you need to assign it to this.sentences:

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  mounted(){
    this.sentences = this.sentences.map(sentence => {
      const arrayOfWords = sentence.text.split(' ');
      sentence.words = arrayOfWords
      return sentence;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentences" :key="i">{{sentence.words}}</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

A better way would be creating a computed property to return the list of sentences with the words in them:

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  computed: {
    sentencesWithWords: function() {
      return this.sentences.map(sentence => {
        const arrayOfWords = sentence.text.split(' ');
        sentence.words = arrayOfWords
        return sentence;
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentencesWithWords" :key="i">{{sentence.words}}</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Array.map() does not mutate the original array. It returns a new array. You need to store it in this.sentences. Or use forEach() to mutate the original array:

mounted(){
    this.sentences.forEach(sentence => {
         const arrayOfWords = sentence.text.split(' ');
         sentence.words = arrayOfWords
    })
    console.log(this.sentences)
}

or

mounted(){
    this.sentences = this.sentences.map(sentence => {
         sentence.words = sentence.text.split(' ');
         return sentence
    })
    console.log(this.sentences)
}