suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Übergeben Sie den ausgewählten Wert: Verwenden Sie die Vuex-Implementierungsmethode in der Methode

<p>Ich habe versucht, meinen Auswahlwert in der FilterStatus-Methode mit Vuex zu übergeben, aber der Wert der Auswahloption wird nicht an die Methode übergeben. </p> <p>Dies ist meine Komponente FilterStatus.vue. Ich verwende v-model, um den Wert der Option zu speichern, und verwende useStore, um den Status zu übergeben.</p> <pre class="brush:php;toolbar:false;"><template> <div class="filter"> <select v-model="filter"> <option value="">Alle</option> <option value="Alive">Alive</option> <option value="Tot">Tod</option> <option value="unknown">Unbekannt</option> </select> </div> </template> <script> importiere { useStore } aus 'vuex' Standard exportieren { aufstellen() { const store = useStore() const filter = ((status) => { store.dispatch('filterStatus', Status) }) zurückkehren { Filter } } } </script> <Stil> </style></pre> <p>In diesem Teil habe ich Vuex verwendet und in Aktionen habe ich meine filterStatus-Methode</p> <pre class="brush:php;toolbar:false;">import { createStore } from 'vuex' Exportieren Sie den Standard-CreateStore({ Zustand: { Figuren: [], ZeichenFilter: [] }, Mutationen: { setCharacters(state, payload) { state.characters = Nutzlast }, setCharactersFilter(state, payload) { state.charactersFilter = Nutzlast } }, Aktionen: { asynchrone getCharacters( {commit} ) { versuchen { const res = waiting fetch('https://rickandmortyapi.com/api/character') const data = warte auf res.json() commit('setCharacters', data.results) commit('setCharactersFilter', data.results) } Catch (Fehler) { console.log(Fehler) } }, filterStatus({commit, state}, status) { const filter = state.characters.filter( (character) => { return charakter.status.includes(status) }) commit('setCharactersFilter', filter) } }, Module: { } })</pre> <p>Vielen Dank für Ihre Hilfe</p>
P粉218775965P粉218775965492 Tage vor602

Antworte allen(2)Ich werde antworten

  • P粉512363233

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

    v-model应该给定一个数据变量,而不是一个函数。在Vue 3中,你还应该使用refreactive来声明这个变量,以创建响应式状态,例如:

    const filter = ref('')
    

    现在,当将其设置为选择器的v-model时,filter将保存所选选项的值。然后,你需要做的第二件事是使用“on change”事件监听器响应选择的变化,这样每次filter更新时,你都可以将其提交到你的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>
    

    Antwort
    0
  • StornierenAntwort