Имею проект с функциями редактирования полей внутри массива объектов, сохранения, удаления, добавления новых полей.. Хотелось бы подключить LocalStorage, но не могу понять, как это делается во Vue. С документацией ознакомилась, но там информация мне оказалась не особо полезной Помогите пожалуйста... Мой код
var vm = new Vue({
el: '#productList',
data: {
productName: '',
quantity: 1,
cost: 1,
isTouched: false,
currentItemIndex: null,
products: [
{
product: 'Хлеб',
quantity: 4,
cost: 30
},
{
product: 'Яблоко',
quantity: 8,
cost: 18
}
]
},
computed: {
inputValidation: function () {
return this.productName.trim().length == 0 ||
this.quantity <= 0 ||
this.cost <= 0
}
},
methods: {
applyDefaultValues: function() {
this.productName = '';
this.quantity = 1;
this.cost = 1;
this.currentItemIndex = null;
},
choiceAction: function () {
this.currentItemIndex == null ? this.addItem() : this.saveChanges();
},
addItem: function () {
var newValue = {
product: this.productName,
quantity: this.quantity,
cost: this.cost
};
this.products.push(newValue)
this.applyDefaultValues()
this.isTouched = false;
},
edit: function (index) {
var editingItem = this.products[index];
this.productName = editingItem.product;
this.quantity = editingItem.quantity;
this.cost = editingItem.cost;
this.currentItemIndex = index;
},
saveChanges: function () {
var newObject = {
product: this.productName,
quantity: this.quantity,
cost: this.cost
}
this.products.splice(this.currentItemIndex, 1, newObject);
this.applyDefaultValues()
this.isTouched = false;
},
deleteItem: function (index) {
this.products.splice(index, 1);
},
blurCondition: function() {
this.isTouched = true;
console.log(this.isTouched)
}
}
})