Как получить ключ из объекта json, полученного через ajax, внутри компонента с v-for?

Question

[Nik1712]

Есть компонент внутри html с условным рендерингом

<cart-item v-for="(product, key, index) in products" :product="product" :key="index">
</cart-item>

Vue.component('cart-item', {
            props: ['product'],
            template:'<div>{{ product }} {{ key }}</div>'
        });
var app = new Vue({
    el: '#app',
    data: function () {
        return {
            products: [];
        };
    },
    beforeCreate: function () {
        var self = this;
        axios.get('http://localhost:3000/cart')
            .then(function (response) {
                self.products = response.data.products;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

через ajax-запрос получаем json вида

{
	"products":{
		"0968757":{
		"imageUrl":"//54754.jpg",
		"name":"rthrthtr",
		},
		"34364326":{
		"imageUrl":"//657457.jpg",
		"name":"rthrthtr",
		}
	}
}

Как получить ключи из products внутри компонента? По идее, их вроде бы надо объявить в props, но вылетает ошибка

Answer 1

[0xD34F]

Как получить ключи из products внутри компонента? По идее, их вроде бы надо объявить в props

А чо не объявили-то?

вылетает ошибка

Очень информативно. Для ясновидящих.

products: [];

Уверены, что тут должна быть точка с запятой? Возможно, вместо того, чтобы обламывать зубы на использовании фреймворков, вам следует изучить основы языка?

Так, теперь что делать:

1. Указываете ключ из products в props, его же используете в шаблоне:

Vue.component('cart-item', {
  props: [ 'product', 'productKey' ],
  template:'<div>{{ product }} {{ productKey }}</div>',
});

2. Также несколько иначе будет выглядеть ваш v-for:

<cart-item
  v-for="(product, key) in products"
  :product="product"
  :product-key="key"
  :key="key"
></cart-item>

UPD. Возможно, стоит сделать products массивом по получении данных, и ключи - свойствами элементов массива. Тогда не придётся передавать в компонент дополнительный параметр.