我嘗試在使用Vuex的FilterStatus方法中傳遞我的選擇值,但它沒有將選擇選項的值傳遞給該方法。
這是我的元件FilterStatus.vue,我使用v-model儲存選項的值,並使用useStore傳遞狀態
在這部分中,我使用了Vuex,在actions中有我的filterStatus方法
import { createStore } 從 'vuex' export default createStore({ state: { characters: [], charactersFilter: [] }, mutations: { setCharacters(state, payload) { state.characters = payload }, setCharactersFilter(state, payload) { state.charactersFilter = payload } }, actions: { async getCharacters( {commit} ) { try { const res = await fetch('https://rickandmortyapi.com/api/character') const data = await res.json() commit('setCharacters', data.results) commit('setCharactersFilter', data.results) } catch (error) { console.log(error) } }, filterStatus( {commit, state}, status ) { const filter = state.characters.filter( (character) => { return character.status.includes(status) }) commit('setCharactersFilter', filter) } }, modules: { } })
非常感謝您的幫忙
v-model應該給定一個資料變量,而不是一個函數。在Vue 3中,你也應該使用
ref
或reactive
來宣告這個變量,以建立響應式狀態,例如:現在,當將其設定為選擇器的v-model時,
filter
將保存所選選項的值。然後,你需要做的第二件事是使用「on change」事件監聽器回應選擇的變化,這樣每次filter
更新時,你都可以將其提交到你的vuex儲存中。