Vue.js 如何解决；TypeError:无法读取属性'；长度'；“未定义”的定义；在vue

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

我得到的错误是

[Vue warn]：挂载挂钩中出错：“TypeError:无法读取未定义的属性'length'”

及

TypeError:无法读取未定义的属性“length”

我不知道如何修复它，即使我的类别正在加载，我可以得到我的类别列表时，我在自动完成键入，但我在我的控制台中得到上述错误，所以我不知道我会如何得到这些错误

这是我的密码

My 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;
        })
      }
    });
  }

myproducts.blade.php

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

my 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>

导出默认值{
道具：[“类别”]，
数据（）{
返回{
createProduct:false
}
},
安装的（）{
this.bus.$on（'create-product'，payload=>{
this.createProduct=true；
});
}
}

我的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>

品名
产品说明
拯救
从“自动完成vue”导入自动完成vue；
导出默认值{
道具：[“类别”]，
组成部分：{
自动完成
},
数据（）{
返回{
分类已完成：错误，
所有类别：[]，
产品：{
名称：“”，
说明：“”
}
}
},
方法：{
getAllCategories（）{
for（设i=0；i

当我没有从父组件传递此组件的“类别”值时，我才收到该错误消息。

---

“undefined”对象是“this.categories”in“for（让i=0；i我已经通过移动解决了我的问题

  axios.get('/categories').then(response => {
    this.categories = response.data;
  })

从my product.js

到我的ProductCreate.vue，所以我的挂载部分如下所示

  mounted(){
    axios.get('/categories').then(response => {
      for(let i = 0; i < response.data.categories.length; i++){
            let name = this.categories[i].name;
            this.allCategories.push({name: name});
          }

          this.categoriesReady = true;
    })
  }

mounted（）{
get（'/categories'）。然后（响应=>{
for（设i=0；i

完成此操作后，我的autocomplete vue工作正常，并且我的控制台中没有出现任何错误

---

在将此标记为已回答之前，我想知道你们是否可以告诉我这是否是最佳实践。

检查最终安装的功能

---

属性长度未定义，因为在循环尝试运行之前，axios GET请求尚未返回类别。尝试通过简单地使用async-around并使用wait等待请求（或者您更喜欢的任何其他方式来解决承诺），使请求成为承诺。然后在循环运行之前加载类别。这应该能解决问题。

我不知道你的意思。我已经更新了我的问题以包括所有内容。`mounted（）{axios.get（'/categories'）。然后（response=>{this.categories=response.data；}）}`将其更改为created（）{}或beforeCreated（）{}它在ProductCreate组件中工作。我认为问题仍然是，在循环尝试运行之前，承诺仍未正确解决。但我不是Vue的专家，所以可能是其他原因。