У меня есть ответ json от API Laravel с 800 предметами на нем.
Я хочу показать 15 пунктов пользователю. Пользователь должен будет нажать кнопку «Загрузить еще», чтобы показать больше 15.
Все работает как положено, но Vue Js выдает это предупреждение:
[Vue warn]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство« slice »из неопределенного» * 1006 *
Код:
<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