L oop Массив Vue компонентов - PullRequest
Новая
       3

L oop Массив Vue компонентов

0 голосов
/ 24 февраля 2020

Я пытаюсь сгенерировать массив из Vue Компонентов на основе файла конфигурации. У меня есть различные разделы пользовательского интерфейса, которые нужно показать; 

const config = [
  'summarySection',
  'scoreSection',
  'educationSection'
]

Так или иначе, я пытаюсь отобразить это в массив vue компонентов, которые я могу использовать в своем шаблоне. Я думал о том, чтобы сделать что-то вроде этого; 

const availableComponents = {
  'summarySection': <summary-section/ >,
  'scoreSection': <score-section/>,
  ...
}

const sections = config.map((section) => availableComponents[section])

<template v-for="section in sections">
  {{ section }}
</template>

Но это явно не работает: /. Есть предложения?

РЕШЕНИЕ

Вот как я решил это; 

// In my config file;
const sections = [
  'profile-summary-section',
  'matchbars-section',
  'job-experience-section',
  'education-section',
  'skills-section',
  'about-section',
  'availability-section',
  'recruiter-notes-section',
  'transport-section',
]

// In my template;
<template v-for="section in sections">
  <component :is="section" :key="section" v-bind="sectionProps[section]"></component>
</template>

// In my computed variables;
sectionProps() {
  return {
    'profile-summary-section': {
      vIf: this.showSummary,
      class: 'mb-2 has-light-border bg-white',
      profile: this.profile,
      number: 0,
      showMatchPercentage: false,
    },
    'matchbars-section': {
     ...
    },
  };
},

Ответы [ 2 ]

2 голосов
/ 24 февраля 2020

Использовать Dynami c компоненты . 

const sections = ['summary-section', 'score-section'];

<template v-for="section in sections">
  <component :is="section"></component>
</template>

Однако section должно просто содержать имя зарегистрированного компонента.

0 голосов
/ 24 февраля 2020

Секции массива должны быть частью Vue данных компонента, чтобы вы могли получить к ним доступ в v-for. Также обратите внимание, что манипуляции с массивом должны выполняться внутри специальных методов экземпляра Vue.

...