我尝试在使用Vuex的FilterStatus方法中传递我的选择值,但它没有将选择选项的值传递给该方法。
这是我的组件FilterStatus.vue,我使用v-model保存选项的值,并使用useStore传递状态
<template>
<div class="filter">
<select v-model="filter">
<option value="">全部</option>
<option value="Alive">存活</option>
<option value="Dead">死亡</option>
<option value="unknown">未知</option>
</select>
</div>
</template>
<script>
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()
const filter = ((status) => {
store.dispatch('filterStatus', status)
})
return {
filter
}
}
}
</script>
<style>
</style>
在这部分中,我使用了Vuex,在actions中有我的filterStatus方法
import { createStore } from '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: {
}
})
非常感谢您的帮助
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号