Question

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

一切正常，但Vue Js发出此警告：

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'slice'”

代码：

<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响应：Series.map

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

任何一种都可以。

Answer 2

检查您是否返回的是json对象而不是php，这意味着您的api端点是否具有类似以下的内容return response（）-> json（$ response）;

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

2 个答案: