How can pass the value select in a method using vuex?-CodePudding

I try to pass the value of my selection in my FilterStatus method that uses Vuex, but it does not pass the value of the option of the selection to the method.

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

<template>
  <div >
    <select v-model="filter">
        <option value="">All</option>
        <option value="Alive">Alive</option>
        <option value="Dead">Dead</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´m using Vuex, in actions I have my method 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: {
  }
})

I would greatly appreciate your help

CodePudding user response：

v-model should be given a data variable, not a function. In Vue 3 you should also declare this variable with ref or reactive to create reactive state, e.g.

const filter = ref('')

Now when set as the select's v-model, filter will hold the value of the selected option. The second thing you need to then do is respond to the selection changing with an "on change" event listener so every time filter updates you can commit it to your vuex store

<template>
  <div >
    <select v-model="filter" @change="filterChange">
      <option value="">All</option>
      <option value="Alive">Alive</option>
      <option value="Dead">Dead</option>
      <option value="unknown">Unknown</option>
    </select>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const filter = ref("");
    const filterChange = (e) => {
      console.log("filter", filter.value);
      // optional: get value from the actual event instead of v-model
      console.log("filter from event", e.target.value); 
    };

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