搜索作業正常。當我想洗掉它但以前的數字不會回來時，就會出現主要問題。在這段代碼中，我將更改直接應用于主變數，但我不會。方法是什么？
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>uj5u.com熱心網友回復：
發生此問題是因為您嵌套過濾了同一個串列，但您需要一個包含完整專案的串列和另一個包含過濾專案的串列，并迭代過濾的專案，而不是主串列。
我建議您將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>uj5u.com熱心網友回復：
您可以在其中過濾專案并用新的過濾結果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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/524986.html