Hello fellow developers! I am currently working on a shop card project and I'm looking to add a new product to the collection of sale elements. Let's consider the JSON structure retrieved from the backend:
"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"
},
]
While working on adding products, I have created an HTML form that mimics the structure of the JSON object. This form submits data to Vuex to modify the variable containing all products for sale, including checkboxes for product categories (highlighted here as it poses an issue):
<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>
The return data structure looked like this:
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}
]
},
};
},
To handle the addition of products, I created a method to dispatch a Vuex action that pushes the new product to the existing sale items:
methods: {
...mapActions(["fetchAllProducts", "addProductSale"]),
addProductOnSale(thisCurrent) {
this.$store.dispatch("addProductSale", this.ProductAdded);
},
},
Subsequently, in Vuex, the action is called along with its mutations and getters:
VUEX
State:{
allProducts: {},
},
Mutations:{
settingProductSale(state,currentProduct){
state.allProducts.products.push(currentProduct)
}
},
getters:{
getAllProducts: state => state.allProducts,
}
The challenge lies within the `product_category` attribute in the action because aligning it with the JSON structure proves tricky, especially when dealing with checkbox selections. Any suggestions or ideas on how to approach this issue would be greatly appreciated. Thank you!