recherche

Maison  >  Questions et réponses  >  le corps du texte

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

<p>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. </p> <p>Voici mon composant FilterStatus.vue, j'utilise v-model pour enregistrer la valeur de l'option et j'utilise useStore pour transmettre le statut</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Dans cette partie, j'ai utilisé Vuex et dans les actions j'ai ma méthode filterStatus</p> <pre class="brush:php;toolbar:false;">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: { } })</pré> <p>Merci beaucoup pour votre aide</p>
P粉218775965P粉218775965492 Il y a quelques jours601

répondre à tous(2)je répondrai

  • P粉512363233

    P粉5123632332023-08-21 18:53:56

    v-model doit recevoir une variable de données, pas une fonction. Dans Vue 3, vous devez également déclarer cette variable en utilisant refreactive 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>
    

    répondre
    0
  • Annulerrépondre