v-for json 中的切片对象 - Vue 警告：TypeError：无法读取未定义的属性“切片”

Posted 2023-02-22

【中文标题】v-for json 中的切片对象 - Vue 警告：TypeError：无法读取未定义的属性“切片”

【英文标题】：v-for slice objects in json - Vue Warn : TypeError: Cannot read property 'slice' of undefined

【发布时间】：2019-10-09 22:23:03

【问题描述】：

我有一个来自 laravel api 的 json 响应，上面有 800 个项目。 我希望向用户显示 15 个项目。用户必须点击“加载更多”按钮才能显示更多 15。

一切都按预期工作，但 Vue Js 抛出此警告：

[Vue 警告]：渲染错误：“TypeError: Cannot read property 'slice' of undefined”

代码：

<div class="col" v-for="value in products.products.slice( 0, productsShow)">
//logic value.content
</div>
<button 
v-if="products.products.length > 15 && 
productsShow < products.products.length" 
@click="loadMore">
Load more products
</button>

VueJs

<script>
    import axios from 'axios'
    export default 
        data() 
            return 
                products: [],
                productsShow: ''
            
        ,
        methods: 
            loadMore () 
                this.productsShow += 15
            
        ,

        created() 
            axios.get('/api/products/pt').then(response => this.products = response.data)
            this.productsShow = 15
        
    
</script>

也试过这个：

<script>
    import axios from 'axios'
    export default 
        data() 
            return 
                products: [],
                productsShow: 15
            
        ,
        methods: 
            loadMore () 
                this.productsShow += 15
            
        ,

        created() 
            axios.get('/api/products/pt').then(response => this.products = response.data)
        
    
</script>

编辑 API回复：Api Laravel Response

【问题讨论】：

你的products是一个数组而不是一个对象，所以你不能做products.products。

你的意思是用products.slice( 0, productsShow)代替products.products.slice( 0, productsShow)吗？

页面工作正常并按我想要的方式呈现。但我得到了那个警告。这是数据：i.stack.imgur.com/WUqmR.jpg。 -> products.slice(0, productsShow) -> 不工作

它是一个数组对象

【参考方案1】：

这是因为您将产品实例化为一个数组，而它原本是一个具有“产品”属性的对象。因此，您应该将数据声明更改为如下所示。

 export default 
    data() 
        return 
            products: 
                products: []
            ,
            productsShow: 15
        
    

在您的模板中，您也可以这样做。

<div
    class="col"
    v-if="products.products"
    v-for="value in products.products.slice( 0, productsShow)"
>

任何一个都可以。

【参考方案2】：

检查你是否返回一个 json 对象而不是一个 php 一个意思是你的 api 端点是否有类似这样的东西 return response()->json($response);

【讨论】：

Laravel Side : $cacheKey = 'products.all.home'; return cache()->remember($cacheKey, 1 , function () $products = Product::select( 'product_id' , 'name' , 'code', 'size' , 'gm2' , 'pic_url' )- >limit(900)->get(); return ['products' => $products]; );