У меня есть "тупой" компонент, который просто получает реквизиты от родителя. Пользователь может изменить селектор, который запускает действие (используя Vuex) для получения новых данных. Когда эти новые данные были получены, я хочу передать его дочернему элементу и повторно отобразить этот компонент с новыми данными. К несчастью, я продолжаю получать это предупреждение в своем наблюдателе. Пожалуйста, помогите:
export default {
name: 'bubbles',
props: {
awesomeData: {
type: Array,
required: true
}
},
data () {
return {
title: 'Best component ever'
}
},
watch: {
awesomeData (newData) {
console.log('hello world')
this.refreshSomethingAwesome(newData)
}
},
methods: {
refreshSomethingAwesome (newData) {}
}
}
s
101 hello world
[Vue warn]: You may have an infinite update loop in watcher with expression "awesomeData"
Я пытаюсь найти решение почти точно так же, как это: Примеры Vuex Но не может показаться, что он работает... hmmm
Выяснил причину, по которой я получал цикл, потому что я на самом деле пытался сортировать измененные данные из свойства (считая его неизменным)
let options = {
children: newData.sort((a, b) => a.value - b.value)
}
Я изменил его на что-то вроде:
const sortedNewData = [...newData].sort((a, b) => a.value - b.value)
let options = {
children: sortedNewData
}
Примечание. Чтобы предотвратить это в моем приложении, я мог бы перенести свое начальное состояние в Map из immutable.js
import { Map, fromJS } from 'immutable'
const initialState = Map({
awesomeData: fromJS([])
})
Полезная статья: alligator.io