Question

我有一个场景，我将数组作为道具传递给组件。然后我根据我作为另一个道具传递的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>

我用空字符串预填充组件数据，以防我调用的数据为空

data: function(){
  personName: '',
  personAge: ''
},

然后使用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过滤它。

Answer 1

计算属性默认为getter，即它们只返回一个值。要将计算属性用作v-model，您应该使用computed setters.

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

然后将这些计算属性用作输入的v-model

<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 ()生命周期钩子来初始化您的数据属性

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

计算属性中的

注意：只是返回值不像你正在做的那样分配

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

1 个答案:

或者