Добрый день, разработчики, в этой магазинной карточке, которую я строю, я сейчас пытаюсь добавить новый продукт в коллекцию элементов продажи. Допустим, что мой json полученный от серверной части имеет такую структуру:
"products": [
{
"product_provider": "tupac shakur",
"rate": 3,
"product_image": [
xxxxxxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxxx,xxxxxxxxxxxxxxxxxx
],
"product_id": 1,
"product_price": 153.4,
"product_stock": 26,
"product_description": "Wood cutter ",
"product_name": "Chain Saw",
"product_category": [
{
"categories_of_product": "Good"
},
{
"categories_of_product": "Danger"
},
{
"categories_of_product": "Homer"
}
],
"people_buying_this_product": "Jack Ripper"
},
]
Затем, работая над добавлением продуктов, я просто сделал этот тег html, в котором я просто эмулирую структуру объекта json, создавая форму, которая после передачи может передавать свои данные в vuex, модифицируя переменную, которая содержит все продукты. в продаже, включая ввод флажка для добавления категорий в продукт, который я строю (я просто опубликую чекбокс, причина причины возникновения проблемы)
<v-layout v-for="(option,index) in ProductAdded.Categories" :key="index">
<v-flex xs12>
<div>
<input name="id of product" label="id of product"type="checkbox" @click="option.selected = !option.selected"/>
<label>{{ option.value }}</label>
</div>
</v-flex>
</v-layout>
Мои данные возвращались как бы;
data() {
return {
thisCurrent: null,
ProductAdded: {
description: "",
upload_image3: "",
upload_image2: "",
upload_image1: "",
unities: 0,
price: 0,
name: "",
Categories: [
{ id: 1, value: "Miscellaneous", selected: true },
{ id: 2, value: "Homer", selected: true },
{ id: 3, value: "Electronic", selected: false },
{ id: 4, value: "Internet", selected: false },
{ id: 5, value: "Kids", selected: true },
{ id: 6, value: "Donas", selected: false },
{ id: 7, value: "Sports", selected: false },
{ id: 8, value: "Horror", selected: false}
]
},
};
},
используя этот объект в данных, я создал метод, который отправляет действие vuex, которое может вывести sh этот объект в переменную, содержащую весь товар в продаже:
methods: {
...mapActions(["fetchAllProducts", "addProductSale"]),
addProductOnSale(thisCurrent) {
this.$store.dispatch("addProductSale", this.ProductAdded);
},
},
И затем в Vuex называют это действие так же, как и его мутации и геттеры:
VUEX
State:{
allProducts: {},
},
Mutations:{
settingProductSale(state,currentProduct){
state.allProducts.products.push(currentProduct)
}
},
getters:{
getAllProducts: state => state.allProducts,
}
И тогда моя проблема была бы здесь в действии объект, который нужно отправить мутациям, потому что все элементы могут быть легко кадрированы, но не в product_category, что исходящий из внутреннего конца представляет собой массив объектов с одинаковыми значениями ключа и разности, которые по сравнению с тем, который я возвращаю в данных, опирающихся на отметьте или снимите флажки:
addProductSale({commit,getters},currentProduct){
console.log(currentProduct);
let createdProductSale={
product_provider:getters.getAllProducts.user.user_name,
product_rate:0,
product_image:[currentProduct.upload_image3,currentProduct.upload_image2,currentProduct.upload_image1],
product_id: 0,
product_purchases:0,
product_price:Number(currentProduct.price),
product_stock:Number(currentProduct.unities),
product_description:currentProduct.description,
product_name: currentProduct.name,
product_category: currentProduct.Categories.---from here i don't know how to build this part of
the object in order to make it to be exactly the
same than the structure came from JSON passing
only those objects who has been checked
(selected true) in my-building ofject-form
people_buying_this_product: 0,
}
commit("settingProductSale",createdProductSale)
}
}
Моя проблема в категории product_category, потому что, честно говоря, не могу представить способ передачи отмеченных флажками элементов в свой массив объектов так же, как требует структура JSON , Пожалуйста, кто-нибудь может дать мне представление о том, что я должен делать? Заранее спасибо !!!