时间戳

首页 > 解决方案 > Vuex“类型错误：无法读取未定义的属性‘数据’”

api - Vuex“类型错误：无法读取未定义的属性‘数据’”

问题描述

我使用 Vuex 和 API 通过商店获取数据。我是使用 Vuex 的初学者。是不是因为之前显示的数据还没有加载？如果是真的如何避免这个错误。

注意：我从不同的服务器检索数据。我打算在这个子域部分为管理员创建 1 个子域，我制作 API 数据。在这种情况下，我在 localhost:300 /（子域）上检索数据。并在用户部分从本地主机上的这个子域获取 API 数据：500

数据已成功加载，但出现以下 2 个错误：

1.错误

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘数据’”

在发现

---> 在资源/js/components/Shop.vue

2.错误

TypeError：无法在 VueComponent.Vue._render (app.js:18850) 在 VueComponent.updateComponent (app.js:17094) 在 Watcher.get ( app.js:17448) at new Watcher (app.js:17437) at mountComponent (app.js:17101) at VueComponent.Vue.$mount (app.js:22846) at VueComponent.Vue.$mount (app.js :25245) 在初始化 (app.js:18443) 在 createComponent (app.js:19914)

数据 ： 图片结果

如果我删除此代码，错误就消失了：

  <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 " v-for="(product,index) in productlist.products.data"  :class="product.category_slug">

商店.vue

export default {
  components:{
      'pagination':Pagination,
  },
  data(){
    return{
      selected: "Choose Province",
     inputSearch:'',
     filterForm:{
       color:[],
       sortBy:'',
       productType:[],
       size:[],
       },
       product_color_id:0,
       quickview:null,
       showQuickview:false,

    }
  },
  computed: {
      productlist(){
        return this.$store.getters.productlist;
      }

  },
  created(){
    if (this.productlist.length ) {
       return;
    }
    this.$store.dispatch('GetProductList');
  },

动作.js

export default{
  GetProductList(context){
     let url ='http://localhost:300/api/v1/product';
  axios.get(url)
      .then(response => {
        context.commit('dataProduct',response.data);
        window.scrollTo(0, 0);
        if($('.js-show-filter').hasClass('show-filter')) {
            $('.js-show-filter').removeClass('show-filter');
            $('.panel-filter').slideUp(400);
        }
        if($('.js-show-search').hasClass('show-search')) {
            $('.js-show-search').removeClass('show-search');
            $('.panel-search').slideUp(400);
        }
      })
      .catch(error => {
          console.log(error);
      });
  }
}

Getters.js

export default{
  productlist(state){
  return  state.productlist;
},

}

突变.js

export default{
  dataProduct(state,payload){
    state.productlist = payload;
  }
}

Store.js

import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export default{
  state:{
    productlist:[],
  },
  getters,
  mutations,
  actions
}

标签： apivue.jsvuex

解决方案

首次加载您的应用程序时，您的应用程序productList尚未初始化，因此无法访问它的对象属性。您需要做的是用另一个带有指令的v-for元素包装您的元素，如下所示：v-if

<template v-if="productList.products.data">
    <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 " v-for="(product,index) in productlist.products.data" :class="product.category_slug">
</template>

附带说明 - 一个好的做法是:key与v-for. 键应该是唯一值，例如对象的 id。如果您不这样做，您以后可能会遇到问题，即删除数组的元素（对象的属性可能会被弄乱）。

另外，请注意我v-for用另一个包裹你，div而不是放在v-if里面v-for div。这是因为如果您v-if在与您的元素相同的元素中使用，则v-for每个循环都会检查条件，在这种情况下，这不是必需的。

推荐阅读