Passez la valeur sélectionnée : utilisez la méthode d'implémentation vuex dans la méthode

Question

J'ai essayé de transmettre ma valeur de sélection dans la méthode FilterStatus à l'aide de Vuex, mais la valeur de l'option de sélection n'est pas transmise à la méthode.

Voici mon composant FilterStatus.vue, j'utilise v-model pour enregistrer la valeur de l'option et j'utilise useStore pour transmettre le statut

<template>
  <div class="filtre">
    <select v-model="filter">
        <option value="">Tous</option>
        <valeur d'option="Alive">Alive</option>
        <option value="Mort">Décès</option>
        <valeur d'option="inconnu">Inconnu</option>
    </sélectionner>
  </div>
</modèle>

<script>
    importer { useStore } depuis 'vuex'

    exporter par défaut {
    installation() {
        const magasin = useStore()

        const filtre = ((statut) => {
          store.dispatch('filterStatus', statut)
        })

        retour {
        filtre
        }
    }
}

</script>

<style>

</style>

Dans cette partie, j'ai utilisé Vuex et dans les actions j'ai ma méthode filterStatus

importer { createStore } depuis 'vuex'

exporter le createStore par défaut ({
  État: {
    personnages: [],
    caractèresFiltre : []
  },
  mutation : {
    setCharacters (état, charge utile) {
      state.characters = charge utile
    },
    setCharactersFilter (état, charge utile) {
      state.charactersFilter = charge utile
    }
  },
  Actions: {
    async getCharacters( {commit} ) {
      essayer {
        const res = attendre fetch('https://rickandmortyapi.com/api/character')
        const data = attendre res.json()
        commit('setCharacters', data.results)
        commit('setCharactersFilter', data.results)
      } attraper (erreur) {
        console.log (erreur)
      }
    },
    filterStatus({commit, état}, statut) {
      const filter = state.characters.filter( (caractère) => {
        retourner caractère.status.includes(statut)
      })
      commit('setCharactersFilter', filtre)
    }
  },
  modules: {
  }
})
Merci beaucoup pour votre aide
            

Answer 1

v-model doit recevoir une variable de données, pas une fonction. Dans Vue 3, vous devez également déclarer cette variable en utilisant ref或reactive pour créer un état réactif, par exemple :

const filter = ref('')

Maintenant, lorsque vous le définissez comme v-model du sélecteur, filter将保存所选选项的值。然后，你需要做的第二件事是使用“on change”事件监听器响应选择的变化，这样每次filterune fois mis à jour, vous pouvez le valider dans votre boutique vuex.

<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>