Как в vue.js динамически добавить компонент на страницу?

Question

[koliane]

Как в vue.js динамически добавить компонент на страницу?
То есть, к примеру, при клике на определенную кнопку нужно добавить компонент в определенное место на странице.

Comments

[koliane]

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

[0xD34F]

Дополнил свой ответ.

[koliane]

Спасибо!

Answer 1

[0xD34F]

Булево свойство, используете его в v-if, по клику переключаете значение:

data: () => ({
  show: false
})

<button @click="show = !show">{{ show ? 'hide' : 'show' }}</button>
<my-component v-if="show"></my-component>

https://jsfiddle.net/5L4phtua/

UPD. Для того, чтобы показывать несколько экземпляров - массив и v-for:

data: () => ({
  items: []
}),
methods: {
  add() {
    this.items.push(...);
  }
}

<button @click="add">add</button>
<my-component v-for="n in items"></my-component>

https://jsfiddle.net/5L4phtua/1/

Comments

[Tereverda]

0xD34F на основе вашего кода сделал вывод других компонентов, жмешь кнопку добавляется компонет, но вместо этого выходит тег - Vue к тегу не привязывается

Answer 2

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

Использовать v-if и изменять переменную через кнопку, всё

Answer 3

[dimka2]

Уважаемые! вы не поняли вопроса!
Не отключать уже существующий объект в doom а удалять его и добавлять заново! или просто добавлять на лету.
Если у меня миллион записей и к каждой нужно окно со свойствами генерить заранее и отключать включать?
Ни один комп не выдержит, такого программирования.
Нужно именно убить объект а при надобности создать.
Так что ответам незачот!