Vue.js 这是处理可能是空的道具的最佳方法吗？

我有一个场景，将数组作为道具传递给组件。然后，根据作为另一个道具传递的ID筛选出所需的对象。我用一个计算属性来做这个

比如说

people[
    {id: '1', name: 'Frank', age: '33'},
    {id: '2', name: 'Bethany', age: '22'},
    {id: '3', name: 'Roscoe', age: '44'},
  ]

<my-component :person-id="id" :peopleArray="people[]"></my-component>

然后使用computed属性填充该数据

computed: {
  getActivePersonById: function(){
    return this.people.find(x => x.id === '1')
  },
  getActivePersonName: function(){
    return this.personName = this.getActivePersonById.name
  },
  getActivePersonId: function(){
    return this.personName = this.getActivePersonById.age
  },
}

然后我像这样使用HTML中的值 我使用：value，因为v-model没有从计算属性更新

<label for="person_name">Name</label>
<input type="text" name="person_name :value="personName">

<label for="person_age">Age</label>
<input type="text" name="person_age :value="personAge">

---

最后，我需要用户提交任何更新的数据，我可以尝试从数据中获取值，或者通过js查询获取值。如果有更好的方法，请告诉我。我想直接使用道具数据，但我需要先按ID对其进行过滤。

默认情况下，计算属性仅为getter，即它们只返回一个值。要将计算特性用作v型模型，应使用

然后将这些计算出的属性用作输入的v模型

<label for="person_name">Name</label>
<input type="text" name="person_name v-model="getActivePersonName">

<label for="person_age">Age</label>
<input type="text" name="person_age v-model="getActivePersonAge">

---

注意：在您的计算属性中，只返回值，而不是像您为添加到接受的答案所做的那样赋值。在我的场景中，计算的setter和创建的解决方案都不起作用

然而，在使用简单数据的测试中，它们确实起了作用。这是因为我在传递的ID可用之前初始化组件。我只是将组件更改为仅在ID通过v-if传递给它时显示

---

现在一切正常。这只是了解组件如何以及何时初始化的一个例子。

更简单的方法可能不是将整个人员数组传递到prop中，而是首先传递ID与ID参数匹配的人员。换句话说，在将数组传递到组件之前对其进行预过滤。通过这种方式，您还可以在组件本身中使用v-model：谢谢，这看起来可以解决我的问题。早上我会试试：最后你提到我不应该使用计算属性来赋值。我应该在我的场景中使用什么？方法也许？@clintogreen只是返回计算属性中的值，并使用这些计算属性来分配其他属性，就像在您的案例中，计算属性用于将值分配给创建的hook中的数据属性一样。谢谢，我尝试了这一点，创建的操作非常有效，但是get和set不起作用。纽瓦尔指的是什么？这就是get返回的结果吗？如果你使用计算设置器，你的计算键应该不再是一个函数，而是一个带有get和set键的对象，每个键都是一个函数。正如ghybs在我的答案评论中提到的，我有一个错误…编辑了答案。试试

computed: {
    getActivePersonById: function(){
      return this.people.find(x => x.id === '1')
    },
    getActivePersonName: {
      get(){
        return this.getActivePersonById.name
      },
      set(newVal){
        this.personName = newVal
      }
    },
    getActivePersonAge: {
      get(){
        return this.getActivePersonById.age
      },
      set(newVal){
        this.personAge = newVal
      }
    }
  }

<label for="person_name">Name</label>
<input type="text" name="person_name v-model="getActivePersonName">

<label for="person_age">Age</label>
<input type="text" name="person_age v-model="getActivePersonAge">

created(){
  this.personName = this.getActivePersonName
  this.personAge = this.getActivePersonAge
}