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"
          ]
        }

然后我使用此循环填充小节。

<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>。如果仅是数据，那么：与将列表项移到单独的Vue组件中相比，您可以使用简单的Javascript函数获得更好的结果。例如：

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

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

当然，您可以将整个“ API”对象移至一个函数中并对其进行模块化。

如果您的列表必须使用Vue组件，那么这是generic components的完美案例。

// 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>

如何使用JavaScipt动态添加Vue组件

1 个答案: