Как использовать JavaScipt для динамического добавления Vue компонентов

Question

Я использую Vue для создания страницы статуса. Решил составить основной список с выпадающими меню. Моя идея заключалась в том, что я бы использовал заполнители, а затем, когда я был готов заполнить раскрывающийся список, я бы сделал отдельные сценарии Vue и импортировал.

export default {
  components: {
    ListItem
  },
  data: () => {
    return {
      list: [
        {
          title: "Message Processor",
          open: false,
          sublist: [
            MessageProcessor, "placeholder", "ph3"
          ]
        },
        {
          title: "API",
          open: false,
          sublist: [
            "ph1", "ph2", "ph3"
          ]
        }

Я тогда использовал этот l oop для заполнить подразделы.

<ul v-show="list.open" class="list-item">
    <li class="sub-items"
     v-for="(item,index) in list.sublist" :key="index">
    {{ item }}
    </li>
</ul>

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

{ "staticRenderFns": [ null ], "_compiled": true, "beforeCreate": [
null ], "beforeDestroy": [ null ], "__file":
"src/components/Panels/MessageProcessor.vue" }

Если это еще не очевидно, я относительно новичок во всем этом, поэтому прошу прощения, если я неправильно использовал какие-либо термины или что-то в этих строках.

Любая помощь приветствуется. Спасибо!

Answer 1

Неясно, имеют ли ваши компоненты элемента списка особую функциональность или это просто <li> s. Если это просто данные, то: вместо того, чтобы перемещать элементы списка в отдельные компоненты Vue, вы можете добиться лучшего результата с помощью простых функций Javascript. Например:

import { apiSublist } from './sublists'
...
    list: [
        {
            title: "API",
            open: false,
            sublist: apiSublist()
        },
    ]

function apiSublist() {
    return ['Option 1', 'Option 2', 'Option 3']
}

Вы, конечно, можете переместить весь объект «API» в функцию и сделать его еще больше.

Если в вашем списке необходимо использовать Vue компоненты, то это идеальный чехол для generi c компонентов .

// Generic component
<template>
    <ul v-show="list.open" class="list-item">
        // Assumes that every member of the sublist is a string component name
        <component :is="item" class="sub-items"
            v-for="(item,index) in list.sublist" :key="index" />
    </ul>
</template>