傳遞選擇的值:使用vuex在方法中的實作方法
P粉218775965
P粉218775965 2023-08-20 22:01:35
0
2
471

我嘗試在使用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: { } })

非常感謝您的幫忙

P粉218775965
P粉218775965

全部回覆 (1)
P粉512363233

v-model應該給定一個資料變量,而不是一個函數。在Vue 3中,你也應該使用refreactive來宣告這個變量,以建立響應式狀態,例如:

const filter = ref('')

現在,當將其設定為選擇器的v-model時,filter將保存所選選項的值。然後,你需要做的第二件事是使用「on change」事件監聽器回應選擇的變化,這樣每次filter更新時,你都可以將其提交到你的vuex儲存中。

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!