编辑：

Question

我正在尝试使用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>

Answer 1

尝试

      <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，则计算所得的属性将注意到该更改并重新呈现下拉菜单。

Answer 2

尽量避免在使用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>

如何动态添加vue bootstrap dropwdown列表项？

2 个答案:

编辑：