我正在嘗試制作一個待辦事項串列應用程式，其中串列中充滿了來自 API 的任務。我還希望能夠添加任務并在重繪 時保存它們。但是我似乎無法合并兩個陣列，API 和用戶輸入的任務。現在，我想將它們保存到我的本地存盤中，但是，它不起作用，我無法弄清楚。此外，我無法弄清楚如何在我創建的函式中執行此操作。任何人都可以向我指出任何資源，或者可以立即看到有什么問題嗎？任何幫助是極大的贊賞！
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;
});
},
}
});
uj5u.com熱心網友回復：
請查看這篇文章 -使用 Vue 創建一個簡單的待辦事項應用程式：串列渲染和類系結
在您的情況下，您應該使用創建或安裝的功能。沒有必要同時使用兩者。如果您同時使用兩者，您應該知道呼叫它們的正確順序。但是，有承諾和異步代碼。所以，我建議只使用一種。
您可以執行以下操作
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;
}
}
})
},
uj5u.com熱心網友回復：
第 1 步： 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>
第 2 步：更新您的添加按鈕操作event
addItem() {
const data = {
title: this.title,
completed: false,
};
this.items.push(data);
this.saveItems(data);
this.clearForm();
},
第 3 步：更新您的saveItems方法
在添加到 localStorage 之前，您必須考慮以下步驟，
必須檢查已經有localStorage資料
如果已經有 localStorage 資料，則必須將新值推送到舊陣列
如果沒有 localStorage 資料，則必須以陣列格式保存新值
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 = ""; },
第 4 步：更新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");
}
}
});
},
加載REST API資料后，您必須檢查是否已經有localStorage資料。如果您有 localStorage 資料，那么您必須連接兩個陣列。
使用 Spread 操作，您可以連接兩個陣列，如下所示，
this.items = [...this.items, ...this.localStorageItems];
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346400.html
上一篇：嘗試對陣列進行排序時出現問題？