使用 vuejs 中的计算属性将数据从子级传递给父级答案

【问题标题】：Pass data from child to parent with a computed property in vuejs使用 vuejs 中的计算属性将数据从子级传递给父级
【发布时间】：2022-01-19 06:52:18
【问题描述】：

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

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

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

【问题讨论】：

标签： vue.js filter nuxt.js

【解决方案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>

【讨论】：

这部分解决了我的问题，因为我必须添加一个事件侦听器（因为发出对我不起作用）并且我必须创建一个“书签”的副本，因为当我改变它，它在孩子身上也发生了变化，我们不希望这样。所以我只是将“书签”传递给孩子，而在父母中我使用“filteredBookmarks”，它是变化的，并且具有“书签”的初始值。我希望来这里的人都明白这一点。
非常感谢！！！

【解决方案2】：

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

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

【讨论】：