I received a JSON response from a Laravel API containing 800 items. The challenge is to display only 15 items to the user initially, with an option to load more by clicking on a 'Load More' button.
Although everything seems to be functioning correctly, Vue Js throws a warning message:
[Vue warn]: Error in render: "TypeError: Cannot read property 'slice' of undefined"
Here is the code snippet where the issue arises:
<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>
Alternative attempt:
<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>
Edit API response can be viewed here: View Laravel API Response