Выбор из нескольких компонентов?

Question

[Ваня]

Подскажите, можно ли выбрать нужный компонент в шаблоне исходя из некоторых параметров, пусть все зависит от параметра x, if(x === 1) - это компонент A, если 2 - это B и тд. Я нашел только один способ, использовать if else if, где сравниваем значения, и выводим нужный компонент. Возможно есть способы лучше?

<A v-if="x === 1">
<B v-else-if="x === 2">
...

Answer 1

[Максим Морев]

<component :is="x === 1 ? A : B" />

Также работает со строками, если компоненты зарегистрированы локально/глобально/вообще из HTML:

<component :is="x === 1 ? 'div' : 'my-component'"></component>

Comments

[Ваня]

Ваш пример работает только в том случае, если я передаю названия компонентов как строку. В противном случае, при подключении компонентов (import), регистрации их в components {...}. Vue выдает ошибку, несколько раз

[Vue warn]: Property "name" was accessed during render but is not defined on instance.

Answer 2

[0xD34F]

computed: {
  component() {
    /*
     * здесь возвращаете имя компонента, в зависимости от... это вам виднее;
     * если действительно будет так, как показано в вопросе - натуральные числа
     * соответствуют компонентам, то можно сложить имена компонентов в массив:
     * return [ 'component-1', 'component-2', 'component-3' ][this.x - 1];
     */
  },
},

<component :is="component" />

Comments

[Ваня]

Всё работает