动态渲染Bootstrap Vue下拉元素

问题描述

@H_502_0@我正在使用Bootstrap Vue构建可重用的Drowndown组件。我想动态呈现不同的元素：项目，标题和分隔线。我该怎么办？

@H_502_0@所以我要实现的是这样的Dropdown组件：

@H_502_4@

<template>
    <b-dropdown>
      <b-dropdown-{{option.element}} 
        v-bind:key="index"
        v-for="option in data"
        :value="option.id"
        >{{ option.value }}</b-dropdown-{{option.element}}
      >
    </b-dropdown>
</template>

<script>
export default {
  name: 'Dropdown',props: {
    data: data
  }
}
</script>

@H_502_0@以使其呈现为

@H_502_4@

    <b-dropdown-title>I am a title</b-dropdown-title>
    <b-dropdown-item>And I am an item</b-dropdown-item>
    <b-dropdown-item>I am another item</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>

@H_502_0@然后从父组件中，我可以传递如下数据：

@H_502_4@

<Dropdown id="modules-dropdown" v-data="data"></Dropdown>

import Dropdown from './Dropdown'
const dropdownData = [{id: 1,value: 'I am a title',element: 'title'},{id: 2,value: 'And I am an item',element: 'item'},{id: 3,value: 'I am another item',{id: 4,element: 'divider'}] 
export default {
  name: 'ParentComponent',components: {
    Dropdown
  },data () {
    return {
      data: dropdownData,}
  },}

解决方法

您需要的是Dynamic Component，它允许您定义应该使用'ActiveSheet.PivotTables(1).PivotFields( _ "[cat1].[cat1].[period]").CurrentPageName = "[cat1].[cat1].&[20200810]"道具渲染的组件。

is

new Vue({
  el: '#app',data() {
    return {
      options: [
        { value: "Hello",element: 'header' },{ value: "Item 1",element: 'item' },{ value: "Item 2",{ value: null,element: 'divider' },{ value: "Item 3",{ value: "Item 4",element: 'item' }
      ]
    }
  }
})