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

Posted 2023-02-22

【中文标题】如何动态添加 vue bootstrap 下拉列表项？

【英文标题】：How to dynamically add vue bootstrap dropwdown list item?

【发布时间】：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>

【参考方案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，计算属性会注意到更改并重新呈现您的下拉列表。