選択した値を渡します: メソッド内で vuex 実装メソッドを使用します

Question

Vuex を使用して FilterStatus メソッドに選択値を渡そうとしましたが、選択オプションの値がメソッドに渡されません。

これは私のコンポーネント FilterStatus.vue です。v-model を使用してオプションの値を保存し、useStore を使用してステータスを渡します

<テンプレート>
  <div class="フィルター">
    <v-model="フィルター" を選択>
        <オプション値="">すべて</オプション>
        <option value="Alive">Alive</option>
        <option value="死んだ">死</option>
        <option value="unknown">Unknown</option>
    </選択>
  </div>
</テンプレート>

<スクリプト>
    「vuex」からインポート { useStore }

    デフォルトのエクスポート {
    設定（） {
        const ストア = useStore()

        const フィルター = ((ステータス) => {
          store.dispatch('filterStatus', ステータス)
        })

        戻る {
        フィルター
        }
    }
}

</スクリプト>

<スタイル>

</style>

この部分では Vuex を使用し、アクションには filterStatus メソッドを使用しました

import { createStore } from 'vuex'

デフォルトのエクスポート createStore({
  州： {
    文字: []、
    文字フィルター: []
  }、
  突然変異: {
    setCharacters(状態, ペイロード) {
      state.characters = ペイロード
    }、
    setCharactersFilter(状態, ペイロード) {
      state.charactersFilter = ペイロード
    }
  }、
  行動： {
    async getCharacters( {コミット} ) {
      試す {
        const res = await fetch('https://rickandmortyapi.com/api/character')
        const data = await res.json()
        commit('setCharacters', data.results)
        commit('setCharactersFilter', data.results)
      } キャッチ (エラー) {
        コンソールログ(エラー)
      }
    }、
    filterStatus({コミット, 状態}, ステータス) {
      const filter = state.characters.filter( (character) => {
        戻り文字.ステータス.インクルード(ステータス)
      })
      commit('setCharactersFilter', フィルター)
    }
  }、
  モジュール: {
  }
})

ご協力いただき誠にありがとうございます

Answer 1

v-model には関数ではなくデータ変数を指定する必要があります。 Vue 3 では、ref または reactive を使用してこの変数を宣言し、reactive state を作成する必要があります。例:

リーリー

これで、filter は、セレクターの v-model に設定されたときに、選択されたオプションの値を保存します。次に、2 番目に行う必要があるのは、「変更時」イベント リスナーを使用して選択範囲の変更に応答し、filter が更新されるたびに vuex ストアにコミットできるようにすることです。

リーリー リーリー