Question

我正在尝试创建一个自动下拉列表以包含类别列表。我正在使用autocomplete-vue创建它。

我得到的错误是

[Vue警告]：挂接钩中出现错误：“ TypeError：无法读取未定义的属性'length'”

和

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

即使我的类别正在加载，我也不知道如何解决它，当我输入自动完成功能时可以得到我的类别列表，但是我在控制台中遇到了以上错误，所以我没有看不到我将如何得到这些错误。

这是我的代码

我的产品.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;
        })
      }
    });
  }

我的产品.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>

Answer 1

当我没有从父级传递此组件的“类别”值时，才收到该错误消息。 “未定义”对象是“ for（let i = 0; i

Answer 2

我已经通过移动解决了我的问题

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

来自我的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;
    })
  }

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

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

Answer 3

检查最终安装的功能。

属性长度是不确定的，因为在循环尝试运行它之前，axios GET请求尚未返回类别。尝试通过简单地使用async并通过await来等待请求（或您希望解决承诺的任何其他方式）来使请求成为承诺。然后将在循环运行之前加载类别。这应该可以解决问题。

如何解决Vue中的“ TypeError：无法读取未定义的属性'length'”

3 个答案: