Question

我创建了一个可搜索的表，该表可以在桌面上正常工作。但是，在移动设备上进行测试时，搜索功能未按预期返回经过过滤的驱动程序。

我尝试了远程调试。奇怪的是，如果我从PC输入手机，搜索就可以了。尝试直接从手机输入时，搜索无法正确过滤。

在我的模板中：

      <input type="text" v-model="searchQuery" @input="filterStandings" 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 filteredStandings" :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>

脚本：

<script>
import styles from "../styles/styles.scss";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "CurrentStandings",

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

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

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

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

    filterStandings() {
      this.$store.commit("set_search", this.searchQuery);
    }
  }
};
</script>

最后，我的商店：

import axios from 'axios';

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

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

export default {
  state,
  getters,
  actions,
  mutations,
};

如果您想亲自看看，这里是我的应用程序中的link。预先感谢！

Answer 1

尝试使用

import scrapy

class BadSpider(scrapy.Spider):
    name = "bad"

    def start_requests(self):
        [...]

    def parse(self, response):
        if (response.url.endswith('/login')):
            print('!!!!! I have no idea what to do here!!!!')
        else:
            [...]

存储中的值可能以某种方式过时，从而在速度较慢的设备上造成某种周期性的“空白”？您可以尝试使用Chrome CPU节流来测试该理论。

在这种情况下，您是直接从事件中获取输入，而不是依靠可能的陈旧值。

您应该通过vuex使用v模型吗？看到： https://vuex.vuejs.org/guide/forms.html

Answer 2

您似乎存在区分大小写的问题。

当我尝试在Android Chrome浏览器中键入一个值时，它会自动将第一个字符设置为大写。因此，如果我尝试输入ham，它将被输入为Ham。这不符合任何条件。如果我在台式机Chrome浏览器中输入Ham，就会发生完全相同的事情。

罪魁祸首似乎是这样：

standing => standing.Driver.driverId.match(state.search)

区分大小写只是第一个问题。 match需要一个正则表达式，并将其传递给字符串将被视为等同于new RegExp(state.search)。这不太可能是您想要的，例如输入[会出错。

像这样的事情可能更近：

standing => standing.Driver.driverId.toLowerCase().includes(state.search.toLowerCase())

我在这里解决不同地区的潜在问题，但是有可能这会给您您想要的东西。

该代码还有其他问题。当前搜索值被保存在多个不同的位置。您确实应该决定是将其保存在商店中还是保留在组件上，并摆脱其他组件。两种方法都可以起作用。尝试同步多个事实来源可能会在以后给您带来问题。如果您想全力以赴，那么https://vuex.vuejs.org/guide/forms.html会有所帮助。

在Android Chrome浏览器上输入时未更新v模型

2 个答案: