Как мне ссылаться на данные в моих дочерних узлах firebase?

Question

Я пытаюсь сослаться на дочерние узлы базы данных Firebase, используя цикл for. Я использую Vue и Vue-fire. Проблема в том, что в следующем коде categories[addItem.category] не ссылается на правильные данные.

<el-select v-model="addItem.category" placeholder="Select a category." id="category-select">
    <el-option
    v-for="(val, key) in categories"
    :key="val['.key']"
    :label="val['.key']"
    :value="val['.key']">
    </el-option>
</el-select>    
<el-button @click="showAdd=true">new category</el-button>
<el-select v-model="addItem.subcategory" placeholder="Select a subcategory." id="subcategory-select" v-show="addItem.category!=''">
    <el-option
    v-for="subcat in categories[addItem.category]"
    :key="subcat['.key']"
    :label="subcat['.key']"
    :value="subcat">
    </el-option>
</el-select>
<el-button v-show="addItem.category!=''" @click="showAdd=true">add subcategory</el-button>      

Я пытаюсь получить все ключи выбранной категории, которые должны давать "механизм", если выбран "механический". В настоящее время, выбирая "механический" делает categories[addItem.category] равно undefined, Вот как выглядят данные в моей базе данных: [![Введите описание изображения здесь][1]][1]

Может кто-нибудь сказать мне, почему моя ссылка на базу categories[addItem.category] не ссылается на дочерние значения?

Если это поможет, вот как я сохраняю данные:

methods: {
     add(){
         var updates = {};
         if (this.addItem.category==''){
         updates['/' + this.addItem.text + '/'] = "null";        
         }
         else if (this.addItem.subcategory==''){
         console.log('adding a subcategory: ' + this.addItem.subcategory);
         console.log(this.addItem.category + ' is the category name');
         updates['/' + this.addItem.category + '/' + this.addItem.text + '/'] = "null";              
         }      
         db.ref('categories').update(updates).then((successMessage) => {
         // successMessage is whatever we passed in the resolve(...) function above.
             // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
             console.log("Yay! " + successMessage);
         });

Который ссылается на следующие данные:

data(){ return {
         addItem: {
         open: false,
         count: 0,
         category: '',
         subcategory: '',
         kks: {
             name: ''
         },
         document: {
             name: ''

         },         
         product: {

             name: ''
         },
         text: ''
             },  
}}

}

и вот свойство firebase:

 firebase: function(){
 return {
     categories: db.ref('categories')

 }   

 }

  [1]: https://stackru.com/images/642d79f16dea420209e0f5213522dc7b2040275d.png

Answer 1

Вот что я в итоге сделал. Следующее было добавлено как вычисляемое свойство:

 subcategories: function(){
     if (this.addItem.category){
     var val;
     db.ref('categories/' + this.addItem.category).on('value', function(snapshot){
         val = snapshot.val();
     });
     return val;
     }
     return this.categories;
 }