선택한 값 전달: 메소드에서 vuex 구현 메소드를 사용하십시오.
P粉218775965
P粉218775965 2023-08-20 22:01:35
0
2
586
<p>Vuex를 사용하여 FilterStatus 메서드에서 선택 값을 전달하려고 했지만 선택 옵션 값이 메서드에 전달되지 않습니다. </p> <p>이것은 내 구성요소인 FilterStatus.vue입니다. v-model을 사용하여 옵션 값을 저장하고 useStore를 사용하여 상태</p> <pre class="brush:php;toolbar:false;"><템플릿> <div class="필터"> <v-model="필터" 선택> <옵션 값="">모두</option> <option value="살아있다">살아있다</option> <옵션 값="죽음">죽음</option> <옵션 값="알 수 없음">알 수 없음</option> </선택> </div> </템플릿> <스크립트> 'vuex'에서 { useStore } 가져오기 기본값 내보내기 { 설정() { const 저장소 = useStore() const 필터 = ((상태) => { store.dispatch('filterStatus', 상태) }) 반품 { 필터 } } } </스크립트> <스타일> <p>이 부분에서는 Vuex를 사용했고 작업에는 filterStatus 메소드가 있습니다</p> <pre class="brush:php;toolbar:false;">'vuex'에서 { createStore } 가져오기 기본 createStore({ 상태: { 문자: [], 문자필터: [] }, 돌연변이: { setCharacters(상태, 페이로드) { state.characters = 페이로드 }, setCharactersFilter(상태, 페이로드) { state.charactersFilter = 페이로드 } }, 작업: { 비동기 getCharacters( {commit} ) { 노력하다 { const res = 가져오기 대기('https://rickandmortyapi.com/api/character') const 데이터 = res.json()을 기다립니다. 커밋('setCharacters', data.results) 커밋('setCharactersFilter', data.results) } 잡기(오류) { console.log(오류) } }, filterStatus({커밋, 상태}, 상태) { const 필터 = state.characters.filter( (문자) => { 반환 문자.상태.포함(상태) }) 커밋('setCharactersFilter', 필터) } }, 모듈: { } })</pre> <p>도와주셔서 진심으로 감사드립니다</p>
P粉218775965
P粉218775965

모든 응답(1)
P粉512363233

v-model에는 함수가 아닌 데이터 변수가 주어져야 합니다. Vue 3에서는 refreactive반응 상태를 생성하려면 를 사용하여 이 변수를 선언해야 합니다. 예를 들면 다음과 같습니다.

으아악

이제 선택기의 v-model로 설정하면 filter将保存所选选项的值。然后,你需要做的第二件事是使用“on change”事件监听器响应选择的变化,这样每次filter업데이트되면 vuex 스토어에 커밋할 수 있습니다.

으아악 으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿