传递选择的值:使用vuex在方法中的实现方法
P粉218775965
P粉218775965 2023-08-20 22:01:35
[Vue.js讨论组]

我尝试在使用Vuex的FilterStatus方法中传递我的选择值,但它没有将选择选项的值传递给该方法。

这是我的组件FilterStatus.vue,我使用v-model保存选项的值,并使用useStore传递状态

<template>
  <div class="filter">
    <select v-model="filter">
        <option value="">全部</option>
        <option value="Alive">存活</option>
        <option value="Dead">死亡</option>
        <option value="unknown">未知</option>
    </select>
  </div>
</template>

<script>
    import { useStore } from 'vuex'

    export default {
    setup() {
        const store = useStore()

        const filter = ((status) => {
          store.dispatch('filterStatus', status)
        })

        return {
        filter
        }
    }
}

</script>

<style>

</style>

在这部分中,我使用了Vuex,在actions中有我的filterStatus方法

import { createStore } from 'vuex'

export default createStore({
  state: {
    characters: [],
    charactersFilter: []
  },
  mutations: {
    setCharacters(state, payload) {
      state.characters = payload
    },
    setCharactersFilter(state, payload) {
      state.charactersFilter = payload
    }
  },
  actions: {
    async getCharacters( {commit} ) {
      try {
        const res = await fetch('https://rickandmortyapi.com/api/character')
        const data = await res.json()
        commit('setCharacters', data.results)
        commit('setCharactersFilter', data.results)
      } catch (error) {
        console.log(error)
      }
    },
    filterStatus( {commit, state}, status ) {
      const filter = state.characters.filter( (character) => {
        return character.status.includes(status)
      })
      commit('setCharactersFilter', filter)
    }
  },
  modules: {
  }
})

非常感谢您的帮助

P粉218775965
P粉218775965

全部回复(1)
P粉512363233

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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号