v-for фрагменты объектов в json - Vue Warn: TypeError: Невозможно прочитать свойство slice из неопределенного - PullRequest
2 голосов
/ 23 мая 2019

У меня есть ответ 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

Ответы [ 2 ]

1 голос
/ 23 мая 2019

Это потому, что вы создаете экземпляр продукта в виде массива, когда он предназначен для объекта со свойством 'products'.Поэтому вы должны изменить свои объявления данных, чтобы они выглядели так.

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

также в вашем шаблоне, вы также можете сделать это.

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

Любой из них будет работать.

0 голосов
/ 23 мая 2019

Проверьте, возвращаете ли вы объект json, а не php. Это означает, что ваша конечная точка API имеет что-то вроде этого return response () -> json ($ response);

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...