Question

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

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

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

以使其呈现为

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

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

<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', element: 'item'}, {id: 4, element: 'divider'}] 
export default {
  name: 'ParentComponent',
  components: {
    Dropdown
  },
  data () {
    return {
      data: dropdownData,
    }
  },
}

Answer 1

您需要的是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", element: 'item' },
        { value: null, element: 'divider' },
        { value: "Item 3", element: 'item' },
        { value: "Item 4", element: 'item' }
      ]
    }
  }
})

动态渲染Bootstrap Vue下拉元素

1 个答案: