隱藏一個項目，當它被刪除這個。$ http.delete（）

我有前端VueJS網站建設，我想隱藏每個項目被刪除。

我在store.js屬性eventIsActive設置爲true：

export const store = new Vuex.Store({ 
    state: { 
    eventIsActive: true 
    } 
})

在ShowItems.vue（網版），我有一個刪除方法，我設置eventIsActive爲false：

removeEvent() { 
    this.$http.delete('/event/' + item) 
    .then((response) => { 
    this.$store.state.eventIsActive = false; 
    this.$router.push('/events'); 
    }) 
    .catch((error) => { 
    alertify.error('Error', error); 
    }) 
}

在同一頁上我沒有該酒店eventIsActive計算方法：

computed: { 
    getActiveEvent() { 
    return this.$store.state.eventIsActive; 
    } 
}

在這個頁面的HTML上，我使用了計算的方法來隱藏已刪除的組件。

<template> 
    <div class="col-6 col-lg-4" v-if="getActiveEvent"> 
    <p>{{itemTitle}}</p> 
    <p>{{itemSubtitle}}</p> 
    </div> 
</template>

問題是，當我刪除一個項目時，剩下的項目被隱藏起來，而不僅僅是被刪除的項目。

在我剛剛在data（）中使用了一個簡單的eventIsActive：true並在removeEvent（）中將其設置爲false之前。更容易使用它，但是因爲我有ShowItems.vue（列表版本），如果我刪除網格版本中的某個項目，列表中的版本仍然存在，直到我刷新頁面。

有人可以幫助我在這個方向嗎？

來源

2017-10-16 John Smith

嘗試這種在http.delete item.state.eventIsActive = FALSE使用項目;並告訴我們 –

這是不是一個有效的sintax我的朋友 –

但我試圖告訴你：'''TypeError：不能設置'undefined'的屬性'eventIsActive' –

回到你的第一次嘗試，沒有Vuex，像@Fatman說。我同意他的看法，但是我想他直到最後都沒有看到你的問題，你有兩個版本的網頁和列表。

在您的情況下，您需要重新加載頁面以隱藏其他頁面版本中的該項目。我建議您使用拼接來確保該項目被刪除。

你可以用你的數組替換eventsList。

請試試這個代碼，在數據（）聲明eventIsActive：

removeEvent(item) { 
    this.$http.delete('/event/' + item) 
    .then((response) => { 
    let idx = this.eventsList.findIndex((item) => { 
     return item.rid === this.event.rid 
    }) 
    this.eventIsActive = false; 
    this.eventsList.splice(idx,1); 
    setTimeout(() => { 
     window.location.reload(); 
    }, 1000); 
    }) 
    .catch((error) => { 
    alertify.error('The event can not be deleted', error); 
    }) 
}

來源

2017-10-16 12:44:50 dragon

Vuex狀態是由應用程序中的所有組件共享的全局狀態。

因此，當您更改eventIsActive時，所有元素都會得到相同的狀態（true/false）並相應地執行操作。

由於顯示/隱藏某個項目與該特定項目狀態有關，因此您需要爲每個項目設置一個本地狀態並僅更改它。

所以在組件的數據屬性，添加活動標誌和使用它來代替：

來源

2017-10-16 09:08:14 Tomer

這就是我第一次嘗試我的朋友。我在我的問題結束時說過。問題是我有相同的項目頁面（網格和列表）的2版本。因此，如果我從網格列表中刪除一個項目並切換到列表版本，那麼該項目仍然在頁面上，即使在數據庫中也不是。 –

您正在使用Vuex來保持全局狀態，難道您不認爲由網格和列表共享的列表適合處於vuex狀態嗎？然後它們將共享相同的列表並且具有相同狀態的相同項目 – Tomer

隱藏一個項目，當它被刪除這個。$ http.delete（）

回答

相關問題