Trying to iterate over an array of objects, and create a new property that contains an array of words from that sentence’s text property

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

Answer

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>

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>