使用 vuejs 中计算的属性将数据从 child 传递到 parent

Question

我想制作一个接收 object 的搜索组件，然后根据用户输入对其进行过滤。然后再次将其传递给 parent 以显示我过滤的内容。 (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>

Answer 2

您正在向父组件发出计算值，父组件更新书签并将其作为道具传递给子组件，这使得计算的属性得到更新，因为您有一个观察者在计算的属性上，它将再次发出它的新值，导致 无限循环 .

一个解决方案可以是发出搜索查询本身，然后在父元素上过滤结果。

使用 vuejs 中计算的属性将数据从 child 传递到 parent

Pass data from child to parent with a computed property in vuejs

filter

vue.js

nuxt.js

使用 vuejs 中计算的 属性 将数据从 child 传递到 parent

Pass data from child to parent with a computed property in vuejs

filter

vue.js

nuxt.js

使用 vuejs 中计算的属性将数据从 child 传递到 parent