在数组中搜索数字 - js答案

【问题标题】：Searching for numbers in an array - js在数组中搜索数字 - js
【发布时间】：2022-11-01 20:03:57
【问题描述】：

搜索工作正常。当我想删除它但以前的数字不会回来时，就会出现主要问题。在这段代码中，我将更改直接应用于主变量，但我不会。方法是什么？

new Vue({
  el: '#app',
  data() {
    return {
      list: [],
      search: '',
    }
  },
  mounted() {
    for(let i = 1300; i <= 1400; i++) {
      const _n = i.toString()
      this.list.push(_n)
    }
  },
  methods: {
    handleSearch() {
      this.list = this.list.filter(i => i.includes(this.search));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input @input="handleSearch()" v-model="search" placeholder="search number" />
  <ul>
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </ul>
</div>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您有list，您可以在其中过滤项目并用新的过滤结果覆盖list。

当您移动一个字符时，您在list 上应用相同的内容，但是这些项目已经被删除了对吧？没有办法让他们回来。

使用第二个列表originalList，您将使用它来替换filter，但不要覆盖，以便您始终可以参考原始值

Vue.config.devtools = false;

new Vue({
  el: '#app',
  data() {
    return {
      list: [],
      originalList: [],
      search: '',
    }
  },
  mounted() {
    for(let i = 1300; i <= 1400; i++) {
      this.originalList.push(i.toString())
    }
    this.list = [ ...this.originalList ];
  },
  methods: {
    handleSearch() {
      this.list = this.originalList.filter(i => i.includes(this.search));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input @input="handleSearch()" v-model="search" placeholder="search number" />
  <ul>
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

发生此问题是因为您嵌套过滤了同一个列表，但您需要一个包含完整项目的列表和另一个包含过滤项目的列表，并迭代过滤的项目，而不是主列表。

我建议您将computed 属性与过滤列表一起使用，而不是触发input 事件，因为您已经使用v-model 来控制input

new Vue({
  el: '#app',
  data() {
    return {
      list: [],
      search: '',
    }
  },
  mounted() {
    for(let i = 1300; i <= 1400; i++) {
      const _n = i.toString()
      this.list.push(_n)
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(i => i.includes(this.search));
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="search" placeholder="search number" />
  <ul>
    <li v-for="(item, i) in filteredList" :key="i">{{item}}</li>
  </ul>
</div>

【讨论】：