Пустые ветви деревьев | Vuejs, Vuetify - PullRequest
Новая
       14

Пустые ветви деревьев | Vuejs, Vuetify

0 голосов
/ 30 марта 2020

Я пытаюсь заполнить дерево Vuetify, но данные не отображаются.

Вот мои данные, которые я использую для заполнения: 

Arr = [   
{ "componentAnc": "297988400", "id": 1 },   
{ "componentAnc": "356610814", "id": 2 },                 
{ "componentAnc": "387885319", "id": 3 },     
{ "componentAnc": "387885320", "id": 4 },   
{ "componentAnc": "397092301", "id": 5 },   
{ "componentAnc": "561514931", "id": 6 },   
{ "componentAnc": "561520700", "id": 7 },   
{ "componentAnc": "561531414", "id": 8 },   
{ "componentAnc": "A17353701", "id": 9 }  
]

Я знаю, что компонент выполняет рендеринг, потому что я вижу его в инструментах разработчиков в браузере, а также когда я нажимаю на элемент меняет цвет на активный.

Вот моя структура в основном компоненте: 

<template>
  <machine-tree :items="pncAncs" />
</template>

<script>
export default {
  components: { MachineTree },
  data () {
    items: []
  }
  methods: {
    async fetchTreeviewData () {
      let response = await QcService.fetchBOM(this.formpnc.value)
        this.pncAncs = response.data
        this.pncAncs.forEach(function (item, i) {
          item.id = i + 1
        })
     }  
  }
}

А вот компонент treevirew: 

<template>
  <v-treeview
    :items="items"
    activatable
    return-object
    transition
  >
  </v-treeview>
</template>

<script>
export default {
  name: 'MachineTree',
  props: {
    items: {
      type: Array,
      default: () => []
    }
  },
  data: () => ({
  })
}
</script>

c Пример структуры данных без дочерних и встроенных ветвей. Есть идеи?

@ EDIT

Я решил проблему самостоятельно. Проблема была в неверном имени ключа - "componentAn c" был заменен на "name" в соответствии с документацией.

...