Блог

Главная - Вопросы по программированию - Цикл от родительского к дочернему компоненту в Vue.js

Цикл от родительского к дочернему компоненту в Vue.js

#vue.js

#vue.js

Вопрос:

У меня есть родительская таблица, в которой есть сотрудники.Я использую поддержку сотрудника для дочерней таблицы.Я вызываю метод getSalary .В настоящее время в результате this.employee.роли дают мне роли для отдельного раздела сотрудника.Я хотел бы получить роли для всех сотрудников на основе идентификатора.Идентификатор может содержать несколько разделов.

Родительский vue

 <table>
  <employee
    v-for="(employee,index) in employees" :key="index"
    :employee="employee"
  />
</table>
  
 data() {
  return {
    employees:[],
  };
},

Дочерний vue

 methods: {
  getSalary() {    
    let result = this.employee.roles.filter(x => x.id == employeeId);
  }
},
export default {
  props: ['employee'],
},

Комментарии:

1. Это неверный код vue. Код выглядит полностью сломанным.

2. кажется, вы хотели бы узнать, какие роли выбраны в child.vue . одним из решений является передача события от дочернего компонента к родительскому, другое решение использует глобальную библиотеку управления состоянием, подобную Vuex .

3. Как будто это неверно v-for="(employees,index) in employee" , ваш массив employees , но, похоже, вы зацикливаетесь на employee

4. Привет, Сфинкс, как я могу передать, Можешь ли ты, пожалуйста, привести мне пример.

5. Привет, Rajdeep, извините, это была ошибка ввода. Да, это должны быть сотрудники. Я исправил это.

Ответ №1:

Это проблема с вашими реквизитами. Я работал над компонентами, и рекомендуемый способ создания реквизитов выглядит следующим образом. И ваши методы должны быть внутри экспорта по умолчанию.

вы должны изменить тип на тот, который будет передан в качестве prop.
итак, если реквизит employee является массивом, измените тип на array. если это строка, измените тип на String

 export default {
  props:{
     employee: { type: Array , default: null}
  },
  methods: {
     getSalary() {    
        let result = this.employee.roles.filter(x => x.id == employeeId);
     }
  },
}