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

Question

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

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

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

代码：

<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 响应

标签： javascriptjsonvue.jsaxios

Answer 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)"
>

任何一个都可以。