I am executing the following code in my mounted() method:
mounted(){
this.sentences = this.sentences.map((sentence, index) => {
let words = [];
sentence.text.split(' ').forEach((word, i) => {
words.push({
text: word,
selected: false
})
});
sentence.words = words
sentence.grade.selected = false;
return sentence;
})
}
Originally, this.sentences looks like this:
sentences: [
{
text: "Go away and hide behind that door where we found you just now.",
grade: {
text: 606
}
},
{
text: "Please don't let anyone spoil these nice fresh flowers.",
grade: {
text: 609
}
},
{
text: "The string had eight knots in it which I had to untie.",
grade: {
text: 700
}
},
]
So I am adding a property words to each object in the sentences array, and a property selected to each object's grade property. After swapping from hard coded words and selected properties to adding them dynamically with JavaScript, the reactivity for words stopped working. I assume I'm not setting them the right way but I can't figure out what I'm doing wrong.
The issues is limitations when adding new properties to a reactive object.
Use Vue.set to add new properties.
Vue.set(sentence, 'words', words)
Vue.set(sentence.grade, 'selected', false)
Or use a computed function.
computed: {
sentencesComputed() {
return this.sentences.map((sentence, index) => {
let words = [];
sentence.text.split(' ').forEach((word, i) => {
words.push({
text: word,
selected: false
})
});
sentence.words = words
sentence.grade.selected = false;
return sentence;
})
}
}