Mi estado contiene la siguiente propiedad:
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 }, ]Ahora estoy tratando de iterar sobre las oraciones, crear una nueva propiedad en cada oración llamada palabras, que será una matriz de palabras. Cuando hago console.log(this.sentences), veo la nueva propiedad, pero cuando trato de representar la propiedad en el DOM, no muestra la nueva propiedad.
mounted(){ this.sentences.map((sentence) => { const arrayOfWords = sentence.text.split(' '); sentence.words = arrayOfWords }) console.log(this.sentences) }Array#map devuelve:
Una nueva matriz en la que cada elemento es el resultado de la función de devolución de llamada.
Además, debe agregar el valor calculado en cada iteración:
Función que se llama para cada elemento de arr. Cada vez que se ejecuta callbackFn, el valor devuelto se agrega a newArray.
Por lo tanto, para obtener la versión actualizada, debe asignarla a 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> Una mejor manera sería crear una computed property para devolver la lista de oraciones con las palabras en ellas:
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>