我想制作一個接收物件然后通過用戶輸入過濾它的搜索組件。然后再次將其傳遞給父級以顯示我過濾的內容。（努克斯特）
// Parent component
<AppSearch :bookmarks="bookmarks" />
...
bookmarks = [ { "title": "Facebook", "url": "https://facebook.com" }, { "title": "Google", "url": "https://google.com/" } ]
// Child search component
<template>
<input type="text" v-model="searchQuery"> </input>
</template>
<script>
export default {
props: ['bookmarks'],
data() {
return {
searchQuery: null,
}
},
computed: {
filteringBookmarks:{
get: function() {
if(this.searchQuery){
return this.bookmarks.filter(data => data.title.toLowerCase().includes(this.searchQuery.toLowerCase()))
} else{
return this.bookmarks;
}
}
}
},
watch: {
filteringBookmarks(newValue) {
console.log(`yes, computed property changed: ${newValue}`); // <--- INFINITES MESSAGES
this.$emit('update:bookmarks', filteringBookmarks)
}
},
}
</script>
我嘗試了另一種方法，但總是在同一個地方結束，整個網站都凍結了。它似乎永遠不會停止重繪 “書簽”。也許是一個回圈問題？
uj5u.com熱心網友回復：
避免此回圈問題的最佳方法是觀看 searchQuery
<script>
export default {
props: ['bookmarks'],
data() {
return {
searchQuery: null,
}
},
watch: {
searchQuery(newValue) {
let filteringBookmarks=[]
if(newValue){
filteringBookmarks=this.bookmarks.filter(data => data.title.toLowerCase().includes(this.searchQuery.toLowerCase()))
}else{
filteringBookmarks=this.bookmarks;
}
this.$emit('update:bookmarks', filteringBookmarks)
}
},
}
</script>
uj5u.com熱心網友回復：
您正在向父組件發送一個計算值，并且父組件更新書簽并將其作為道具傳遞給子組件，這使得計算屬性得到更新，并且由于您在計算屬性上有一個觀察者，它將再次發出這是導致無限回圈的新值。
一種解決方案可以是自己發出搜索查詢，然后在父元素上過濾結果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/415980.html
標籤：