在数组中搜索数字-js

Question

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

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>

Answer 1

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

我建议您对筛选列表使用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>

Answer 2

YOu有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>