Как динамически добавить элемент раскрывающегося списка Vue начальной загрузки?

Как динамически добавить элемент выпадающего списка vue bootstrap?

Старайтесь избегать прямого манипулирования DOM, когда вы можете использовать Vue. В этом случае лучшим вариантом будет установить текущие активные данные в любой список, который вы хотите отобразить. Затем в шаблоне зациклите каждый из этих активных элементов данных.

 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' }], } }) 
 {amp}lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /{amp}gt; {amp}lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /{amp}gt; {amp}lt;script src="https://unpkg.com/vue"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;section class="drop-down"{amp}gt; {amp}lt;b-dropdown text="Error Reports" class="m-md-2"{amp}gt; {amp}lt;b-dropdown-item v-for="(item, key) in reportData" :key="key"{amp}gt; {{ item.text }}: {{ item.value }} {amp}lt;/b-dropdown-item{amp}gt; {amp}lt;/b-dropdown{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;/div{amp}gt; 

Не стесняйтесь, дайте мне знать, если у вас есть какие-либо вопросы.


Следующий пример может помочь прояснить, что вам нужно делать, если у вас есть вложенные массивы объектов, структура которых заранее известна.

Однако, если вы не знаете глубину своего дерева, вам, возможно, придется рассмотреть вопрос об использовании рекурсивных компонентов .

 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] } } }) 
 {amp}lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /{amp}gt; {amp}lt;link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /{amp}gt; {amp}lt;script src="https://unpkg.com/vue"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;section v-if="activeData" class="drop-down"{amp}gt; {amp}lt;h2{amp}gt;{{ activeData.name }}{amp}lt;/h2{amp}gt; {amp}lt;b-dropdown text="Error Reports" class="m-md-2"{amp}gt; {amp}lt;b-dropdown-item v-for="(item, key) in activeData.value" :key="key"{amp}gt; {{ item.text }}: {{ item.value }} {amp}lt;/b-dropdown-item{amp}gt; {amp}lt;/b-dropdown{amp}gt; {amp}lt;/section{amp}gt; {amp}lt;button @click="changeData"{amp}gt;Change Data Item{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector