Pass the selected value: use vuex implementation method in the method

Question

I tried passing my selection value in FilterStatus method using Vuex but it is not passing the value of selection option to the method.

This is my component FilterStatus.vue, I use v-model to save the value of the option and use useStore to pass the status

<template>
  <div class="filter">
    <select v-model="filter">
        <option value="">All</option>
        <option value="Alive">Alive</option>
        <option value="Dead">Death</option>
        <option value="unknown">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>

In this part, I used Vuex and in actions I have my filterStatus method

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: {
  }
})

Thank you very much for your help

Answer 1

v-model should be given a data variable, not a function. In Vue 3, you should also declare this variable using ref or reactive to create reactive state, for example:

const filter = ref('')

Now, filter will save the value of the selected option when set to the selector's v-model. Then, the second thing you need to do is use an "on change" event listener to respond to changes in the selection, so that every time the filter is updated, you can commit it to your vuex store.

<template>
  <div class="filter">
    <select v-model="filter" @change="filterChange">
      <option value="">全部</option>
      <option value="Alive">存活</option>
      <option value="Dead">死亡</option>
      <option value="unknown">未知</option>
    </select>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const filter = ref("");
    const filterChange = (e) => {
      console.log("filter", filter.value);
      // 可选：从实际事件中获取值，而不是使用v-model
      console.log("来自事件的filter", e.target.value); 
    };

    return {
      filter,
      filterChange,
    };
  },
};
</script>