Question

我使用axios在创建的（）方法中检索数据，如下所示：

data() {
    return {
        filterBox: false,
        color: [],
        sortBy: null,
        productType: [],
        products: null,
        productcolors: null,
        categories: null,
        active_el: 0,
        isActive: false,
        categories: null,
        inputSearch: '',
    }
},

created() {
    axios.get('/admin/product_index_vue').then(response => {
        this.products = response.data.products.data;
        this.productcolors = response.data.productcolors;
        this.categories = response.data.categories;
        console.log(this.products.length);
    }).catch((error) => {
        alert("ERROR !!");
    });
},

使用console.log进行检查时，数据在那里：

Vue DevTools：

但是当尝试检查mount（）函数时，我得到的数据为空 这个问题的原因是什么？

我真正想要的是创建一个过滤器，但是使用此功能时，数据不会出现：

computed: {
    filteredProduct: function () {
        if (this.products.length > 0) {
            return this.products.filter((item) => {
                return (this.inputSearch.length === 0 || item.name.includes(this.inputSearch));
            });
        }
    }
},

HTML代码：

<tr v-for="product in filteredProduct">
    <td style="width:20px;">{{product.id}}</td>
    <td class="table-img-product">
        <img class="img-fluid" alt="IMG">
    </td>
    <td> {{ product.name }}</td>
    <td style="display:none">{{product.product_code}}</td>
    <td>{{ product.base_color }}</td>
    <td>{{ product.category }}</td>
    <td>{{ product.price }}</td>
    <td>{{ product.stock }}</td>
    <td>{{ product.status }}</td>
    <td>
        <button type="button" name="button" v-on:click="deleteProduct(product.id,product.product_color_id)">
            <i class="fas fa-trash"></i>
        </button>
    </td>
</tr>

结果

app.js：36719 [Vue警告]：渲染错误：“ TypeError：无法读取   属性“长度”为空”

位于

--->在resources \ assets \ js \ components \ products \ Product_index.vue中

是什么原因导致此功能不起作用并且没有检测到产品数据？

Answer 1

这是因为计算出的属性可能会在返回响应之前进行计算。

如果您的数据属性将是数组，那么我建议从一开始就将它们定义为数组。在数据对象中，将属性更改为例如

ggplot(d, aes(x=Measure, y=mean, fill=Condition)) + 
  geom_col(colour="black",width=0.5,    
           position=position_dodge(0.5)) +
  geom_errorbar(aes(ymin=mean-se, ymax=mean+se),
                position=position_dodge(0.5), width=.25)+
  scale_x_discrete(limits = c("Interest", "Value","Effort","Difficulty","Competence","JOL")) +
  scale_y_continuous(breaks=seq(0,7,by =1),limits = c(0,7), expand = c(0,0))+
  scale_fill_manual(values=c("#ffcc00ff","#ffffff"), name = "Condition") + 
  labs(x="", y = "Rating (0-7)")+
  theme_minimal() +
  theme(axis.line = element_line(color="black"),
        axis.ticks = element_line(color="black"),
        panel.border = element_blank())

或者，您可以在计算属性方法中添加其他检查：

products: [],
productcolors: [],

Answer 2

这是axios的响应方式

    mounted: {
    let self = this
    axios.get('/admin/product_index_vue').then(response=>{
    self.products=response.data.products.data;
    self.productcolors =response.data.productcolors;
    self.categories=response.data.categories;
    console.log(self.products.length);
}).catch((error)=>{
  alert("ERROR !!");
});
  },

使用axios vue.js检索数据

2 个答案: