<template>
<div class="ar-catalog-item">
<span class="ar-catalog-item__badge">
<img :src="('../assets/images/' + product_data.badge)" alt="">
{{ product_data.badge }}
</span>
<img class="ar-catalog-item__img" :src="require('../assets/images/' + product_data.image)" alt="img">
<p class="ar-catalog-item__sku">{{ product_data.sku }}</p>
<p class="ar-catalog-item__name">{{ product_data.name }}</p>
<p class="ar-catalog-item__except">{{ product_data.except }}</p>
<p v-if="product_data.type == 'pizza'"
class="ar-catalog-item_sku_variations">Выберите размер</p>
<ar-variables
:options="product_data.variations"
@select="selectSize"
class="ar-catalog-item__variations">
</ar-variables>
<div class="ar-catalog-item-bottom">
<p class="ar-catalog-item-bottom__price"> Цена: {{ product_data.price }}₽</p>
<button v-if="product_data.quantity === 1" @click="addToCart"
class="ar-catalog-item-bottom__add_to_cart_btn btn">хочу</button>
<!-- <div class="ar-catalog-item-qty">
<span
v-if="product_data.quantity > 1"
class="ar-catalog-item-qty_btns">
<button class="item_quantity_btn"
@click="decrementInProductCard">-</button>
{{ product_data.quantity }}
<button class="item_quantity_btn"
@click="addToCart">+</button>
</span>
</div> -->
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
import arVariables from './ar-variables.vue'
export default {
name: 'ar-catalog-item',
components: {
arVariables
},
props: {
product_data: {
type: Object,
default() {
return {}
}
},
},
data() {
return {
}
},
computed: {
},
methods: {
selectSize(i) {
i == i || 0
this.selectedSize = this.product_data.variations[i]
},
...mapActions([
]),
//* Кнопки отвечающие за действие увелечения и убавления количества в корзине из карточки товара *//
addToCart() {
this.$emit('addToCart', this.product_data); //* Добавляем в корзину товар
},
decrementInProductCard() { //* Убавляем товар
let pd = this;
pd.$emit(
'decrementInProductCard',
pd.product_data.quantity--)
}
},
mounted() {
this.$set(this.product_data, 'quantity', 1)
}
}
</script>productsOnSale: function () {
return this.PRODUCTS.filter((product) => product.type)
},myActionFilter(category) {
this.sortedProducts = [];
let vm = this;
this.PRODUCTS.map(function (item) {
if (item.category === category.name) {
vm.sortedProducts.push(item);<template> <ul> <li v-for="products in productsOnSale" :key="product._id"> {{ product.name }} </li> </ul></template><script>export default { data() { return { products: [], } }, computed: { productsOnSale: function () { return this.products.filter((product) => product.onSale) }, },}</script>Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/dn/Desktop/my_fourth_arigato/src/components/categories/pizza.vue: Unexpected reserved word 'await'. (74:19)
72 | console.log("123")
73 | if (this.$router.params.id) {
> 74 | result = await this.$api.store.get(this.$router.params.id)
| ^
75 | } else {
76 | result = await this.$api.store.fetch()
77 | }<v-products
inline-template
:products="products"
:selected=[116,324,113,144,119,120,150,453,395,140,449,146,125,425,126,154,143,461,155,394,77,138,459,503,508,130,133,505,115,457,134,455,450]>
<div
class="products js-product-list"
:class="!productsLoaded && 'is-loading'"
v-cloak
>
<div class="container">
<div class="products__header js-products-header">
<h1 class="products__title">Сеты</h1>
</div>