我正在尝试创建一个自动下拉菜单来显示类别列表。我正在使用 autocomplete-vue 来创建它。

我收到的错误是

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'length' of undefined"

和

TypeError: Cannot read property 'length' of undefined

我不确定如何修复它，即使我的类别正在加载，并且我在自动完成中输入时可以获取我的类别列表，但我在控制台中收到上述错误，所以我不知道如何收到这些错误。

这是我的代码

我的products.js

  Vue.component('product-app', require('./ProductApp.vue').default);
  Vue.component('product-create', require('./ProductCreate.vue').default);

  if (document.getElementById('product-app')) {
    const app = new Vue({
      el: "#product-app",
      data(){
        return{
          categories: []
        }
      },
      mounted() {
        axios.get('/categories').then(response => {
          this.categories = response.data;
        })
      }
    });
  }

我的products.blade.php

  <div id="product-app">
    <product-app :categories="categories"></product-app>
  </div>

我的 ProductApp.vue

  <template>
    <div>
      <div class="row">
        <div class="col-md-6">
          <products :products="products"></products>
        </div>

        <div class="col-md-6">
          <product-create v-if="createProduct" :categories="categories"></product-create>
        </div>
      </div>
    </div>
  </template>

  <script>
    export default {
      props: ['categories'],
      data() {
        return {
          createProduct: false
        }
      },
      mounted() {
        this.bus.$on('create-product', payload => {
          this.createProduct = true;
        });
      }
    }
  </script>

我的 ProductCreate.vue

  <template>
    <div>
      <div class="row">
        <div class="col-lg-6">
          <div class="form-control">
            <label>Product Name</label>
            <input type="text" v-model="product.name" class="form-control">
          </div>

          <div class="form-control">
            <label>Product Description</label>
            <textarea v-model="product.description"></textarea>
          </div>

          <div class="form-control">
            <autocomplete-vue v-if="categoriesReady" :list="allCategories"></autocomplete-vue>
          </div>

          <button class="btn btn-success" @click="saveProduct">Save</button>
        </div>
      </div>
    </div>
  </template>

  <script>
    import AutocompleteVue from 'autocomplete-vue';

    export default {
      props: ['categories'],
      components: {
        AutocompleteVue
      },
      data(){
        return{
          categoriesReady: false,
          allCategories: [],
          product: {
            name: '',
            description: ''
          }
        }
      },
      methods: {
        getAllCategories(){
          for(let i = 0; i < this.categories.length; i++){
            let name = this.categories[i].name;
            this.allCategories.push({name: name});
          }

          this.categoriesReady = true;
        }
      },
      mounted(){
        this.getAllCategories();
      }
    }
  </script>