如何通过vue-router参数中的id查找对象，然后将其属性传递给vue中的模板

Question

我正在从ContactDetails组件中的vuex状态获取数据，然后将其存储在contacts数组中，然后我被计算不足，试图根据从路由器参数传递的id属性来查找和返回对象。

这是代码

export default {
  data() {
    return {
      contacts: [],
    };
  }, 
  props: ["id"],

  created() {
    this.contacts = this.$store.getters.getContacts;
  },
  computed:{
    contact () {
      return this.contacts.find(contact => {
        contact.id === this.id
      })
    }
  }

但是以某种方式我一直使该对象未定义：

Answer 1

您的代码有2个问题：

1. 类型不匹配。 Contact.id是数字类型，但url prop id是字符串。
2. 使用find时，您应该使用具有隐式return（推荐）的箭头功能，或者可以使用花括号但必须使用return关键字。

 contact() {
      return this.contacts.find(contact => contact.id === parseInt(this.id));
    }