javascript - VueJS 获取与路由匹配的信息

Question

我正在使用 VueRouter。我需要我的用户在直接导航到单个企业时能够看到数据。为此，我尝试创建此方法来循环访问我的数据并将路由与数据的属性值进行匹配。

我有以下方法:

methods: {
    finalItem () {
      return this.businesses.filter((business) => {
        return business.link === this.$route.params.listing
      })
    }
  }

但是我得到的不是返回的业务数据:

boundFn

我也尝试过这样的事情:

finalItem () {
      return this.businesses.filter((business) => {
        return business.match(this.$route.params.listing)
      })
    }

但遇到了同样的问题。

Answer 1

由于 finalItem 是一个方法，如果您尝试像计算属性一样访问它，它只会返回该方法的函数定义(因此是 boundFn)。

将方法更改为计算属性:

computed: {
  finalItem () {
    return this.businesses.filter((business) => {
      return business.link === this.$route.params.listing
    })
  },
}

否则，您需要实际调用该方法:

// in your component's script
console.log(this.finalItem());

// in your template
{{ finalItem() }}