Перебирать локально зарегистрированные компоненты в vuejs

У меня есть компонент Vue, который импортирует и регистрирует другие компоненты локально. Я хочу перебрать объект компонентов и отобразить их динамически. Я пытаюсь добиться этого следующим образом (внутри файла .vue):

<template>
  <div v-for = "component in components" class = "component">
    <component v-bind:is = "component"></component>
  </div>
</template>

<script>
import CarouselDefault from './carousel/CarouselDefault'
import AlertError from './alerts/AlertError'
import AlertInfo from './alerts/AlertInfo'
import AlertSuccess from './alerts/AlertSuccess'
import AlertWarning from './alerts/AlertWarning'

export default {
  name: 'App',
  components: {
    CarouselDefault,
    AlertError,
    AlertInfo,
    AlertSuccess,
    AlertWarning
  }
}
</script>

и я получаю это сообщение об ошибке:

Property or method "components" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

javascript vue.js

24.12.2018 10:42

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

736

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Свойство компонентов недоступно в построителе шаблонов vue, вам необходимо определить вычисленное свойство или свойство данных. пример:

computed:{
components(){
       return [
          CarouselDefault,
          AlertError,
          AlertInfo,
          AlertSuccess,
          AlertWarning
       ];
}
}

или

data(){
return {
 components:[
    CarouselDefault,
    AlertError,
    AlertInfo,
    AlertSuccess,
    AlertWarning
  ]
}
}

24.12.2018 10:48

Другие вопросы по теме

Увеличение и рендеринг текста с помощью vue.js

Сайт vue js, показывающий пустую страницу в производстве

Сервисный воркер успешно зарегистрирован, но код в файле serviceworker.js не был выполнен

Пользовательский интерфейс элемента vue.js привязывает логические данные к столбцу выбора

Вставить форму выбора выбора Laravel - Vue

Почему триггер `@ change` не работает для v-data-picker?

Как создать список дел с помощью OctoberCMS?

Статические изображения Vue не работают при развертывании на веб-сервере

Vuedraggable с модулем vuex в laravel

Java скрипт вложенные функции фильтра

Перебирать локально зарегистрированные компоненты в vuejs

Ответы 1

Другие вопросы по теме

Похожие вопросы