vue.js - 使用 vuejs 中的计算属性将数据从子级传递到父级

Question

我想制作一个搜索组件来接收一个对象，然后根据用户输入对其进行过滤。然后再次将其传递给父级以显示我过滤的内容。 (Nuxt)

// 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>

我试过其他方法，但总是在同一个地方结束，整个网站都卡住了。它似乎永远不会停止刷新“书签”。也许是循环问题？

Answer 1

避免这个循环问题的最好方法是观察 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>