Estoy ejecutando el siguiente código en mi método montado():
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; }) }Originalmente, this.sentences se ve así:
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 } }, ] Así que estoy agregando words de propiedad a cada objeto en la matriz de oraciones y una propiedad selected para la propiedad de grado de cada objeto. Después de cambiar de palabras codificadas y propiedades seleccionadas a agregarlas dinámicamente con JavaScript, la reactividad de las palabras dejó de funcionar. Supongo que no los estoy configurando de la manera correcta, pero no puedo entender qué estoy haciendo mal.
Los problemas son las limitaciones al agregar nuevas propiedades a un objeto reactivo.
Use Vue.set para agregar nuevas propiedades.
Vue.set(sentence, 'words', words) Vue.set(sentence.grade, 'selected', false)O use una función calculada.
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; }) } }