ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Как правильно добавлять данные в начальное состояние Vue.data из axios response?

Задаю в корневой экземпляр Vue начальное состояние данных
data:function(){ return {
				Config: {},
				list: [],
				activeService: ''
			}},

По хуку created я запрашиваю с сервера json - в нём объект. В Конфиге csrf, в list массив объектов, json соответствует начальным состояниям в колбэке data.
created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$data = response.data;
				})
			}

Ловлю ошибку: Avoid replacing instance root $data. Use nested data properties instead.
Окей, действительно - я же просто вытаюсь создать ссылку на объект... Поступаю по другому.
created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)
				})
			}

И снова ловлю ошибку. Ту же самую. Стало интереснее - поэкспериментировал дальше.
Такое работает:
created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$data.Config = response.data.Config;
					rootVueSteplist.$data.list = response.data.list;
				})
			}

Но это говнокод. Мб кто-то знает в чём проблема? Гуглить ошибки vuejs просто вынос мозга
UPD: попробовал применить метод set экземпляра vue и был послан ошибкой подлинее:
created: function(){
				axios.get("/jsondata/stepdata/step-1.json")
				.then(function(response){
					rootVueSteplist.$set(rootVueSteplist.$data, response.data)
					// rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)
				})

Либо я тупой, либо лыжи г**но....
Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option
  • Вопрос задан
  • 308 просмотров
Решения вопроса 1
0xD34F
@0xD34F
rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)

Присваивание не нужно. Object.assign модифицирует объект, переданный первым аргументом. Т.е., достаточно просто
Object.assign(rootVueSteplist.$data, response.data)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@imhuman
Ну ты не можешь напрямую $data присвоить новое значение во время выполнения. Сделай внутри $data какоe-нибудь свойство и кидай ответ уже в него
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
21 авг. 2018, в 16:11
1500 руб./за проект
21 авг. 2018, в 15:45
4000 руб./за проект
21 авг. 2018, в 15:42
2500 руб./за проект