Я передаю данные объекта product в компонент product. Могу ли я вызвать целый объект в компоненте, или мне нужно его передать, как это сделано сейчас
:object="product"
<template>
<div class="container">
<spin v-if="loading"></spin>
<div v-else class="product-list">
<product
v-for="product in productList"
:key="product.id"
:object="product"
:id="product.id"
:title="product.title"
:price="product.price"
/>
</div>
</div>
</template>
<script>
import Spin from "../components/spin.vue";
import axios from "axios";
import Product from "../components/Product.vue";
export default {
components: {
Spin,
Product,
},
data: () => ({
loading: false,
products: [],
}),
methods: {
loadProducts() {
axios.get("/api/products").then(res => {
this.products = res.data;
setTimeout(() => {
this.loading = false;
}, 500);
});
},
},
};
<template>
<div class="product">
<div class="product-photo">
<img src="https://loremflickr.com/210/210" alt="" width="210px" height="210px" />
</div>
<div class="product-content">
<span class="product-title">
<router-link :to="/product/ + id">{{
title
}}</router-link>
</span>
<div class="product-bottom">
<div class="product-price">
{{ price }}
</div>
<div class="product-button">
<button v-on:click="addToCart()">
Добавить в корзину
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
id: {
type: Number,
default: "NULL",
},
title: {
type: String,
default: "NULL",
},
price: {
type: String,
default: "NULL",
},
object: {
type: Object,
default: 'NULL'
}
},
methods: {
addToCart(){
this.$store.commit('addToCart', this.object);
},
}
}
</script>
Средний
