【问题标题】：How to dynamically add vue bootstrap dropwdown list item?如何动态添加 vue bootstrap 下拉列表项？
【发布时间】：2020-02-15 18:16:24
【问题描述】：

我正在尝试使用 bootstrap-vue 动态添加下拉列表项，但无法将下拉列表项呈现给浏览器。这是我到目前为止所拥有的，任何输入将不胜感激。我希望它是动态的，因此如果原始 JSON 发生更改，下拉列表项将随之更改，而无需返回并更改代码。

注意：reportData 是一个对象列表，这就是为什么我将 reportData 的第一个元素设置为我希望从中呈现下拉列表项的 newData。

下拉列表组件：

  <section class="drop-down">
    <div>
      <b-dropdown id="dropdown-list" text="Error Reports" class="m-md-2">
       <b-dropdown-item >ITEM</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
      </b-dropdown>
    </div>

    <button @click="changeReport">Click to change</button>
  </section>
</template>

<script lang="js">

  export default  {
    name: 'drop-down',
    props:['reportData'],
    data () {
      return {
        newData: this.reportData[0]
      }
    },
    methods: {
      changeReport(){
        this.newData = this.reporData[1]
      }
    },
    watch: {
      newData : function(val, OldVal){
        var dropdownList = document.getElementById("dropdown-list")
          for (var key in val){
            console.log(key)
            var dropdownItem = document.createElement('b-dropdown-item')
            dropdownItem.value = key
            dropdownList.add(drowdownItem, 0)
          }
      }
    }
}


</script>

<style>

</style>

【问题讨论】：

标签： javascript vue.js vue-component vuex bootstrap-vue

【解决方案1】：

在使用 Vue 时尽量避免直接操作 DOM。在这种情况下，您最好的选择是将当前活动数据设置为您想要显示的任何列表。然后，在模板中，循环遍历每个活动数据项。

new Vue({
  el: "#app",
  data: {
    reportData: [{
      text: 'Item 1 Text',
      value: 'Item 1 Value'
    }, {
      text: 'Item 2 Text',
      value: 'Item 2 Value'
    }, {
      text: 'Item 3 Text',
      value: 'Item 3 Value'
    }],
  }
})

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

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

<div id="app">
  <section class="drop-down">
    <b-dropdown text="Error Reports" class="m-md-2">
      <b-dropdown-item v-for="(item, key) in reportData" :key="key">
        {{ item.text }}: {{ item.value }}
      </b-dropdown-item>
    </b-dropdown>
  </section>
</div>

如果您有任何问题，请随时告诉我。

编辑：

如果您有嵌套的对象数组并且您提前知道其结构，以下示例可能有助于阐明您需要做什么。

但是，如果您不知道树的深度，您可能不得不考虑使用recursive components。

new Vue({
  el: "#app",
  data: {
    // This is your input data
    dataStore: [{
      name: 'Item 1',
      value: [{
        text: 'SubItem 1 Text',
        value: 'SubItem 1 Value'
      }, {
        text: 'SubItem 2 Text',
        value: 'SubItem 2 Value'
      }, {
        text: 'SubItem 3 Text',
        value: 'SubItem 3 Value'
      }]
    }, {
      name: 'Item 2',
      value: [{
        text: 'SubItem 1 Text',
        value: 'SubItem 1 Value'
      }, {
        text: 'SubItem 2 Text',
        value: 'SubItem 2 Value'
      }, {
        text: 'SubItem 3 Text',
        value: 'SubItem 3 Value'
      }, {
        text: 'SubItem 4 Text',
        value: 'SubItem 4 Value'
      }, {
        text: 'SubItem 5 Text',
        value: 'SubItem 5 Value'
      }, ]
    }],

    // This is the data we will display
    activeData: null
  },

  created() {
    // The value that will be selected upon creation
    this.activeData = this.dataStore[0]
  },

  methods: {
    changeData() {
      this.activeData = this.dataStore[1]
    }
  }
})

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

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

<div id="app">
  <section v-if="activeData" class="drop-down">
    <h2>{{ activeData.name }}</h2>
    <b-dropdown text="Error Reports" class="m-md-2">
      <b-dropdown-item v-for="(item, key) in activeData.value" :key="key">
        {{ item.text }}: {{ item.value }}
      </b-dropdown-item>
    </b-dropdown>
  </section>

  <button @click="changeData">Change Data Item</button>
</div>

【讨论】：

是的，我认为最好也这样做。如果我的数据中有一个值的对象数组，你有什么建议？示例：new Vue({ el: "#app", data: { reportData: [{ text: 'Item 1 Text', value: 'Item 1 Value' }, { text: 'Item 2 Text', value: 'Item 2 Value' }, { text: 'Item 3 Text', value: [{ text: 'Item 1 Text', value: 'Item 1 Value' }, { text: 'Item 2 Text', value: 'Item 2 Value' }, }], } })
我添加了一个编辑，解释了如何处理嵌套的对象数组。但是，如果您不提前知道树的结构或深度，您很可能不得不使用递归组件。

【解决方案2】：

试试这个

      <b-dropdown id="dropdown-list" text="Error Reports" class="m-md-2">
       <b-dropdown-item v-for="item in listItems">@{{ item }}</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
      </b-dropdown>

      <button @changeReport>Click To Change</button>

在你的 JS....

    data() {
      items: []
    },

    computed: {
      listItems() {
        return this.items;
      }
    },
    methods: {
      changeReport(){
        this.items = this.reporData[1]
      }

类似的东西。我不确切知道您的数据是什么样的，但如果您用新数据填充 this.list，计算属性会注意到更改并重新呈现您的下拉列表。

【讨论】：