Это лучший способ работать с реквизитом, который может быть пустым?

Question

У меня есть сценарий, в котором я передаю массив в качестве опоры для компонента.Затем я отфильтровываю нужный мне объект на основе идентификатора, который я передал в качестве еще одного объекта.Я делаю это с вычисляемым свойством.

например

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 to для заполнения этих данных

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-модель не обновлялась свычисляемое свойство)

<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-запроса.Пожалуйста, дайте мне знать, если есть лучший способ сделать это.Я бы хотел использовать данные реквизита напрямую, но сначала мне нужно отфильтровать их по идентификатору.

Answer 1

Просто чтобы добавить к принятому ответу.В моем сценарии и вычисленные сеттеры, и созданные решения не работали.

Однако в тесте с более простыми данными они работали.Это было потому, что я инициализировал компонент до того, как идентификатор, который я передавал, был доступен.Я просто изменил компонент, чтобы он показывался только тогда, когда ему был передан идентификатор через v-if.

Теперь все работает нормально.Это был лишь случай понимания того, как и когда был инициализирован компонент.

Answer 2

По умолчанию вычисляемые свойства являются только геттерами, т.е. они просто возвращают значение.Чтобы использовать вычисляемое свойство в качестве v-model, вы должны использовать вычисляемые сеттеры.

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
}

примечание: в ваших вычисляемых свойствах просто возвращает значенияне присваивайте, как вы делаете