Организация компонентов vue js?

Question

[Gravio]

Есть страница с подключенными 30 компонентами, когда пользователь на нее заходит, то скачиваем с json массив с данными. Из json достаем какие компоненты показываем, а какие нет (через v-if). Примерно так:

<comp1 v-if="(Q === 1 && B === 1) || (Q === 2 && B === 1)"
<comp2 v-if="(Q === 1 && B === 2) || (Q === 2 && B === 2)"
<comp3 v-if="(Q === 1 && B === 3) || (Q === 2 && B === 3)"
<comp4 v-if="(Q === 1 && B === 4) || (Q === 2 && B === 4)"

Правильно ли так реализовано все ? Можно ли генерировать компоненты как-то из json ?

Comments

[Robur]

Можно ли генерировать компоненты как-то из json ?

Обычно как-то можно, но это зависит от ваших компонент, вашего json, и логики показа/скрытия которых в вашем посте не особо видно.

Answer 1

[0xD34F]

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

data: () => ({
  componentNames: [ 'comp1', 'comp2', 'comp3', 'comp4' ],
  ...
}),
computed: {
  componentName() {
    return [ 1, 2 ].includes(this.Q) && this.componentNames[this.B - 1];
  },
},

<component :is="componentName"></component>

UPD. Если дополнительно нужно передавать параметры, то в массиве можно хранить вместо имён компонентов объекты, которые будут содержать имя и набор параметров:

data: () => ({
  components: [
    { name: '...', props: { ... } },
    { name: '...', props: { ... } },
    ...
  ],
  ...
}),

Вычисляемое свойство не изменится (за исключением имени, конечно), а шаблон станет выглядеть так:

<component
  v-if="component"
  :is="component.name"
  v-bind="component.props"
></component>

https://jsfiddle.net/69xv0b47/

Answer 2

[Дима Паутов]

Ну конечно так не правильно, запутаться можно. Лучше, что бы ваш json имел уже какой-то ключ, по которому вы отобразите нужный компонент