javascript - 正在搜索的项目取决于先前的结果
问题描述
我对 Vue 很陌生,最近开始研究 Vuex。我正在尝试通过 API 进行搜索。初始搜索按预期工作。但是,如果使用不同的查询执行搜索,则仅搜索先前返回的内容。
例如,如果我搜索“ve”,“Vettel”和“Verstappen”都会按预期返回。但是,如果我在没有先前返回的字母的情况下搜索任何内容,则不会出现任何内容,例如,之后搜索 Hamilton 时的“ham”将不会返回任何内容。
我试过修改突变,但我不确定我哪里出错了。
这是组件:
<template>
<transition
appear
appear-class="fade-enter"
appear-to-class="fade-enter-to"
appear-active-class="fade-enter-active"
>
<div>
<h3>Current Standings</h3>
<input type="text" v-model="searchQuery" v-on:input="search" placeholder="search driver">
<table class="standings">
<thead>
<th>Position</th>
<th>Driver Name</th>
<th>Nationality</th>
<th>Team</th>
<th>Wins</th>
<th>Points</th>
</thead>
<tbody>
<tr v-for="standing in ALL_STANDINGS" :key="standing.position" class="standing">
<td>{{standing.position }}</td>
<td>{{standing.Driver.driverId | last-name | to-title-case}}</td>
<td>{{standing.Driver.nationality | to-title-case}}</td>
<td>{{standing.Constructors[0].constructorId | to-title-case}}</td>
<td>{{standing.wins }}</td>
<td>{{standing.points}}</td>
</tr>
</tbody>
</table>
</div>
</transition>
</template>
<script>
import styles from "../styles/styles.scss";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
name: "CurrentStandings",
data() {
return {
searchQuery: ""
};
},
created() {
this.fetchStandings();
},
mounted() {
this.created = true;
},
computed: {
...mapState(["standings", "filter"]),
...mapGetters(["ALL_STANDINGS", "GET_SEARCH", "FILTERED_SEARCH"])
},
methods: {
...mapActions(["fetchStandings"]),
...mapMutations(["SET_SEARCH", "SET_FILTER"]),
search: function() {
// set SEARCH to input
this.$store.commit("SET_SEARCH", this.searchQuery);
// return matches between ALL_STANDINGS and SEARCH
this.SET_FILTER(
this.ALL_STANDINGS.filter(standing => {
return standing.Driver.driverId.match(this.GET_SEARCH);
})
);
}
}
};
</script>
这是standings.js 模块:
import axios from 'axios';
const state = {
standings: [],
filter: [],
search: '',
};
const getters = {
/* eslint no-shadow: ["error", { "allow": ["state"] }] */
ALL_STANDINGS: state => state.standings,
FILTERED_STANDINGS: state => state.filter,
GET_SEARCH: state => state.search,
};
const mutations = {
SET_STANDINGS: (state, standings) => (state.standings = standings),
SET_SEARCH: (state, search) => (state.search = search),
SET_FILTER: (state, filter) => (state.standings = filter),
RESET_STANDINGS: (state, standings) => (state.filter = standings),
};
const actions = {
async fetchStandings({ commit }) {
const response = await axios.get('https://ergast.com/api/f1/current/driverStandings.json');
commit('SET_STANDINGS', response.data.MRData.StandingsTable.StandingsLists[0].DriverStandings); // response.data is passed to 'standings' in the mutation (2nd arg)
},
};
任何帮助将不胜感激!谢谢 :)
解决方案
执行过滤时不应修改初始数据集:
SET_FILTER: (state, filter) => (state.standings = filter),
应该
SET_FILTER: (state, filter) => (state.filter = filter),
推荐阅读
- c# - StringLength 属性不验证为什么我的实现
- javascript - while 循环和承诺
- mysql - PHP5 无法获取经理 ID 的会话并在报告表的转发列中计数“未见”
- shell - Emacs shell 控制命令输出显示
- ios - 我可以使用 Testflight 构建在物理 ios 设备上自动化测试吗?
- javascript - 如何停止功能?( jQuery, .hover() )
- java - Java AsyncHttpClient:从 LazyResponseBodyPart 写入 AsynchronousFileChannel 时文件损坏
- android - MockWebServer 不等待 N 秒返回存根响应
- css - 如何增加 Material UI FormLabel 和 Slider 之间的垂直间距?
- android - 如何制作可扩展的 ListView 项目背景颜色?