選択した値を渡します: メソッド内で vuex 実装メソッドを使用します
P粉218775965
2023-08-20 22:01:35
<p>Vuex を使用して FilterStatus メソッドに選択値を渡そうとしましたが、選択オプションの値がメソッドに渡されません。 </p>
<p>これは私のコンポーネント FilterStatus.vue です。v-model を使用してオプションの値を保存し、useStore を使用してステータスを渡します</p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<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></pre>
<p>この部分では Vuex を使用し、アクションには filterStatus メソッドを使用しました</p>
<pre class="brush:php;toolbar:false;">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', フィルター)
}
}、
モジュール: {
}
})</pre>
<p>ご協力いただき誠にありがとうございます</p>
v-model には関数ではなくデータ変数を指定する必要があります。 Vue 3 では、
リーリーref
またはreactive
を使用してこの変数を宣言し、reactive state を作成する必要があります。例:これで、
リーリー リーリーfilter
は、セレクターの v-model に設定されたときに、選択されたオプションの値を保存します。次に、2 番目に行う必要があるのは、「変更時」イベント リスナーを使用して選択範囲の変更に応答し、filter
が更新されるたびに vuex ストアにコミットできるようにすることです。