Как изменить data свойство VUE из метода приложения, данными полученными с сервера?

Question

[Maксим Волков]

Сайт интернет-магазина, backend на Laravel, корзина на VUE.JS.
При открытии страницы корзины, данные в JSON формате присваиваются data свойству items и страница корзины магазина открывается, отрабатывает успешно.
Для изменения количества товаров, удаления из товаров из корзины создан метод getUpdate, который на AJAХ получает обновленные данные с сервера – новый объект с данными который необходимо передать data свойству items, для реактивного изменения станицы без перезагрузки.

const app = Vue.createApp({
	data() {
			return {
					items: {!! json_encode($data) !!}, // данные, при загрузке страницы 
			}
	},
	methods: {
			getUpdate: function (id, qty, type) {
					let formData = new FormData();
					formData.append('id', id);
					formData.append('qty', qty);
					formData.append('type', type);
					const cart = new XMLHttpRequest();
					cart.open('POST', '/cart-update', true);
					cart.setRequestHeader('X-CSRF-Token', '{{csrf_token()}}');
					cart.send(formData);

					cart.onload = function() {
							if (cart.status != 200) {
									console.log(`Ошибка ${cart.status}: ${cart.statusText}`);
							} else {
									this.items = JSON.parse(cart.response); // Ответ сервера, новые данные полученные с сервера, THIS - не принадлежит приложению VUE, указывает на функцию
									console.log(JSON.parse(cart.responseText));
							}
					}
			}
	},

Данные с сервера приходят, однако не знаю как их изменить data свойство items. Конструкция this.items = JSON.parse(cart.response); - не работает, поскольку ajax функция в методе getUpdate – имеет свой контекст: this. Достучаться до app.items – тоже не получается.

Прошу Помощи, подскажите - как изменить data свойство данными полученными с сервера?

Answer 1

[0xD34F]

Конструкция this.items = JSON.parse(cart.response); - не работает, поскольку ajax функция в методе getUpdate – имеет свой контекст

Предлагаю вам погуглить способы сохранения контекста - данный вопрос только на этом ресурсе поднимался сотни (если не тысячи) раз.

Достучаться до app.items – тоже не получается.

Экземпляр корневого компонента возвращает метод mount, а не createApp.

Comments

[Maксим Волков]

Благодарю. Проблема решена.