검색 중인 항목은 이전 결과에 따라 다릅니다.

검색 중인 항목은 이전 결과에 따라 다릅니다.

나는 Vue에 꽤 처음 와서 최근에 Vue를 파고들었다.API를 통해 검색하려고 합니다.초기 검색은 의도한 대로 작동합니다.그러나 다른 조회를 사용하여 검색을 수행할 경우 이전에 반환된 항목만 검색합니다.

예를 들어 've'를 검색하면 예상대로 'Vettel'과 'Verstapen'이 모두 반환됩니다.그러나 이전에 반환된 문자가 없는 문자를 검색해도 아무것도 표시되지 않습니다(예: 나중에 해밀턴을 검색할 때 '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>

다음은 순위 모듈입니다.

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),

저는 직접 상태를 수정하는 대신 돌연변이를 줄이고 getter를 사용하여 프로젝트를 단순화함으로써 이를 알아냈습니다.

  data() {
    return {
      searchQuery: "",
    };
  },

  created() {
    this.fetchStandings();
  },

  computed: {
    ...mapState(["standings", "search", "filter"]),
    ...mapGetters(["filteredStandings", "sortedFilteredStandings"])
  },

  methods: {
    ...mapActions(["fetchStandings"]),
    ...mapMutations(["SET_SEARCH"]),

    filterStandings() {
      this.$store.commit("SET_SEARCH", this.searchQuery);
    }
  }

스토어:

const state = {
  standings: [],
  search: '',
};

const getters = {

  filteredStandings: state => state.standings.filter(standing => standing.Driver.driverId.match(state.search)),
};

const mutations = {
  SET_STANDINGS: (state, standings) => (state.standings = standings),
  SET_SEARCH: (state, search) => (state.search = search),
};

언급URL : https://stackoverflow.com/questions/56451027/items-being-searched-depend-on-previous-result