функция в vuejs выполняется более одного раза

Question

Я новичок в vuejs, в моем шаблоне я хочу показать менеджер этажей, который определен в других менеджерах массивов [], поэтому я использую функцию вместо переменной.Но эта функция работает три раза, я не знаю, почему

вот мой шаблон

<div class="user-information containt-box shadow">
    <div class="row mb-5">

        <div class="col-sm-6">
        <h4>Basic Information</h4>
        <div class="user-search-result-table mt-5">
            <div class="form-detail no-gutters row">
            <strong class="label col-sm-5">Floor Manager: </strong>
            <span class="value col-sm-7">{{floorManager()}}</span>
            </div>

Вот мой метод,

floorManager(){
    let floorManager= this.managers.filter(event => {
         return event.id == this.manager_id;      
         })
    return floorManager[0].first_name+' ' + 
floorManager[0].last_name;
},

Пожалуйста, скажите мне, есть ли лучший способ сделать это. Спасибо заранее.

Answer 1

Попробуйте использовать вычисляемые свойства вместо методов.(Просто извлеките эту функцию из методов и вставьте ее в computed)

computed:{
    floorManager(){
         let floorManager= this.managers.filter(event => {
             return event.id == this.manager_id;      
         })
        return floorManager[0].first_name+' ' + floorManager[0].last_name;
},

, а в шаблоне просто замените вызов метода для getter (имя свойства)

  ...
  <strong class="label col-sm-5">Floor Manager: </strong>
  <span class="value col-sm-7">{{floorManager}}</span>
  ...

Answer 2

Я закончил с такой осторожностью

floorManager() {
            let floorManager = this.managers.filter(event => {
                return event.id == this.floor.manager_id;
            })
            if(floorManager.length>0)
            return floorManager[0].first_name + ' ' + 
floorManager[0].last_name;
            else
            return '';
        }

Используя вычисленное свойство, оно выполняется один раз

computed: {
    hloorManager(){
       let  floorManager= this.managers.find(event => {
       return event.id == this.manager_id;      
       })
      console.log('qse');
      return floorManager.first_name+' ' + floorManager.last_name;
  },
  ...
}

но все еще не может прочитать свойство 'first_name' из неопределенного

Answer 3

Функция будет оцениваться каждый раз, когда this.managers изменяется. Это значение должно быть видоизменено в других частях вашего кода.

Также

Используйте find вместо filter. Возвращаемое значение не будет массивом.

Если это не метод вычисляемых свойств, он должен быть. Переместите его в раздел computed и удалите () из шаблона.