动态渲染 Bootstrap Vue Dropdown 元素

Question

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

所以我想实现的是这样的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>

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

<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，它允许您使用 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' }
      ]
    }
  }
})

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.17.3/dist/bootstrap-vue.css" rel="stylesheet" />


<div id="app">
  <b-dropdown text="Dropdown">
    <component 
      :is="`b-dropdown-${option.element}`" 
      v-for="(option, index) in options"
      :key="index" 
    >
      {{ option.value }}
    </component>
  </b-dropdown>
</div>

动态渲染 Bootstrap Vue Dropdown 元素

Dynamically render Bootstrap Vue Dropdown elements

javascript

vue.js

dropdown

bootstrap-vue