Estoy tratando de hacer una aplicación de lista de tareas donde la lista se llena con tareas de una API. También quiero poder agregar tareas y guardarlas cuando actualice. Sin embargo, parece que no puedo fusionar las dos matrices, la API y las tareas ingresadas por el usuario. Por ahora, me gustaría guardarlos en mi almacenamiento local, sin embargo, no funciona y no puedo resolverlo. Además, no puedo averiguar cómo hacer esto en mi función creada. ¿Alguien podría señalarme algún recurso o puede ver de inmediato qué es lo que está mal? ¡Cualquier ayuda es muy apreciada!
var app = new Vue({ el: '#app', data () { return { items: [{ title: "", completed: false, }], title: '', show: 'all', } }, mounted () { if(localStorage.getItem('items')) { try { this.items = JSON.parse(localStorage.getItem('items')); } catch(e) { localStorage.removeItem('items'); } } }, created: function () { axios .get("https://jsonplaceholder.typicode.com/todos") .then(response => this.items = response.data) items.concat(items) }, computed: { activeItems() { this.saveItems; return this.items.filter(item => { return !item.completed; }); }, filteredItems() { if (this.show === 'active') return this.items.filter(item => { return !item.completed; }); if (this.show === 'completed') return this.items.filter(item => { return item.completed; }); return this.items.reverse(); }, }, methods: { addItem() { this.items.push({ title: this.title, completed: false }); this.title = ''; this.saveItems(); }, deleteItem(item) { var index = this.items.indexOf(item); if (index > -1) this.items.splice(index, 1); this.saveItems(); }, saveItems() { const parsed = JSON.stringify(this.item); localStorage.setItem('items', parsed); }, showActive() { this.show = 'active'; }, showAll() { this.show = 'all'; }, showCompleted() { this.show = 'completed'; }, deleteCompleted() { this.items = this.items.filter(item => { return !item.completed; }); }, } });por favor, eche un vistazo a este artículo: creación de una aplicación de tareas sencillas con Vue: representación de listas y vinculación de clases
En su caso, debe usar la función creada o montada. No es necesario usar ambos. Si usa ambos, debe saber el orden correcto en el que se llaman. Sin embargo, hay promesas y código asíncrono. Por lo tanto, recomiendo usar solo uno.
Puedes hacer algo como a continuación
mounted () { axios .get("https://jsonplaceholder.typicode.com/todos") .then(response => { const apiItems = response.data; if(localStorage.getItem('items')) { try { this.items = apiItems.concat(JSON.parse(localStorage.getItem('items'))); } catch(e) { localStorage.removeItem('items'); this.items = apiItems; } } }) },Paso 1: plantilla HTML
<div id="app"> <ul> <li v-for="(item, index) in items" :key="index">{{ item.title }}</li> </ul> <div> <input type="text" v-model="title" /> <button type="button" @click.prevent="addItem">Add</button> </div> </div> Paso 2: actualice su event acción de botón Agregar
addItem() { const data = { title: this.title, completed: false, }; this.items.push(data); this.saveItems(data); this.clearForm(); }, Paso 3: actualice su método saveItems
Antes de agregar a localStorage, debe considerar los siguientes pasos,
Tiene que comprobar que ya tiene datos de almacenamiento local
Si ya tiene datos de almacenamiento local, debe enviar los nuevos valores a la matriz anterior
Si no hay datos de almacenamiento local, debe guardar los nuevos valores en un formato de matriz
saveItems(item) { var localSaveItems = []; var getLocalItems = localStorage.getItem("items"); if (getLocalItems) { getLocalItems = JSON.parse(getLocalItems); localSaveItems = [...localSaveItems, ...getLocalItems]; localSaveItems.push(item); localStorage.setItem("items", JSON.stringify(localSaveItems)); } else { localSaveItems.push(item); localStorage.setItem("items", JSON.stringify(localSaveItems)); } }, clearForm() { this.title = ""; }, Paso 4: actualice la función de create
created: function () { axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => { this.items = response.data; if (localStorage.getItem("items")) { try { this.localStorageItems = JSON.parse(localStorage.getItem("items")); this.items = [...this.items, ...this.localStorageItems]; } catch (e) { localStorage.removeItem("items"); } } }); }, Una vez cargados los datos de la REST API , debe verificar si ya tiene datos de localStorage o no. Si tiene datos de almacenamiento local, debe unir dos matrices.
Usando la operación Spread, puede unir dos matrices como a continuación,
this.items = [...this.items, ...this.localStorageItems];