Как реализовать шаблон стратегии для компонентов Vue
Так вот в чем дело. У меня есть Cat, Dog и Horse, которые реализуют интерфейс Animal. Для каждого из них у меня есть DogComponent, CatComponent и HorseComponent.
Вопрос:
Как создать компонент AnimalComponent, который принимает любой Animal, но отображает DogComponent в случае, если это Dog, без использования switch-case или набора v-if в <template>?
Пожалуйста, предположим, что просто отобразить разные imageUrl и title недостаточно.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
704
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Просто используйте динамический компонент Vue :)
Этот специальный компонент отображает компонент с именем, указанным в свойстве is.
<template>
<component v-for = "animal in animals" :is = "`${animal.type}-component`"/>
</template>
<script>
// vue syntax omitted for simplicity
animals: [
{ type: 'dog' },
{ type: 'cat' },
]
</script>
Другие вопросы по теме
JHipster с vue — Как показать данные из Backend во Frontend
Как объявить свойство типа boolean или () => boolean
Как я пишу чистое условие из "сложных" комбинаций условий с && или ||
Экспорт компиляции Webpack из файла ts в ничто
Иерархический JSON - найти полный путь к объекту
Рекурсивно перебирать несколько массивов для объединения значений
Ошибка Tslint: правило «prefer-inline-decorator» вызвало ошибку: TypeError: невозможно прочитать свойство «вид» неопределенного
Vuejs получает данные формы из массива
VUEX Getter = массив фильтров внутри массива
Использование сервисов внутри скрипта NestJS запускается из командной строки
Похожие вопросы
Фильтруйте массив каждый раз, когда функция выполняется, и мое состояние реакции изменяется
Как использовать изображение SVG в Matter.js?
Bootstrap 5 вкладок и форма
Ошибка динамического компонента Nuxt.js «Либо предварительно скомпилируйте шаблоны в функции рендеринга, либо используйте сборку, включаемую компилятором»
Как иметь дополнительный макет разделенного экрана в HTML/CSS?
Как получить каждый объект на четырех уровнях вложенности объекта?
UseEffect вообще не работает при переходе на страницу с помощью React Router
Заказать римские цифры в javascript
Увеличить интерактивную область кнопки ввода даты
Можно ли сократить javascript, чтобы избежать if и else?