vue 부트스트랩 드롭다운 목록 항목을 동적으로 추가하는 방법

vue 부트스트랩 드롭다운 목록 항목을 동적으로 추가하는 방법

bootstrap-vue를 사용하여 drowdown 목록 항목을 동적으로 추가하려고 하는데 브라우저에 렌더링할 드롭다운 목록 항목을 가져올 수 없습니다.지금까지 제가 들은 내용은 이렇습니다. 어떤 의견이라도 주시면 감사하겠습니다.원래의 JSON이 변경되었을 경우, 코드를 변경하지 않고 드롭 다운 리스트의 아이템을 변경할 수 있도록, dynamic하게 하고 싶다.

메모: 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>

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>

궁금하신 점이 있으시면 언제든지 말씀해 주세요.

---

편집:

다음 예시는 미리 구조를 알고 있는 개체의 중첩 배열이 있는 경우 수행할 작업을 명확히 하는 데 도움이 될 수 있습니다.

그러나 트리의 깊이를 모를 경우 재귀 구성 요소의 사용을 고려해야 할 수도 있습니다.

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>

이거 먹어봐

      <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새 데이터를 사용하면 계산된 속성이 변경 내용을 인식하고 드롭다운을 다시 표시합니다.

언급URL : https://stackoverflow.com/questions/58456113/how-to-dynamically-add-vue-bootstrap-dropwdown-list-item