Level 28
This is way too summarized to offer any kind of help. Show some code. What have you tried so far ?
Jul 28, 2022
5
Level 1
Problem with passing data
Now i'm trying to create my pet project(boardgames online shop)(Laravel + Vue3) and I got a problem. There are orders, each orders may have products. I've tried to create CRUD for this. And here how I imagined this. After choosing a product that can be related to a created order I should have ability to choose amount of the product.(f.e. I choose game A for my order and I want to add to my order 3 game A, then I choose game B for the same order and I want to add 1 game B etc.) And the problem is that I don't know how to pass the amount of each games related to the order. I have Order, Product, and OrderProduct(pivot table for many to many relationship) models. Amount of product is the column in OrderProduct model. If you need any of my code - write and I'll share with you. P.S. Sorry for such a condensed description, I just don't know how to describe this rightly
Level 1
@piljac1 Hi, thanks for your reply, I have written more details below
Level 1
Send a screenshot of your code ie like what you have implemented so far
Level 1
@Keshi Hi, thanks for your reply, I have written more details below
Level 1
Here is more details. Create.vue
<template>
<Head>
<title>Create Order</title>
<meta
type="description"
content="Create Order"
head-key="description"
/>
</Head>
<div class="content-center">
<h1 class="text-4xl font-bold">Create Order</h1>
</div>
<div class="h-screen content-center">
<form @submit.prevent="submit" class="mt-8 max-w-md mx-auto">
<div class="mb-6">
<label
for="delivery_adress"
class="block mb-2 text-sm font-medium text-gray-900"
>Delivery Adress</label
>
<input
v-model="form.delivery_adress"
name="delivery_adress"
type="text"
id="delivery_adress"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<div
v-if="form.errors.delivery_adress"
v-text="form.errors.delivery_adress"
class="text-red-500 text-xs mt-1"
></div>
</div>
<div class="mb-6">
<label
for="tag"
class="block mb-2 text-sm font-medium text-gray-900"
>User
</label>
<select
v-model="form.user_id"
id="tag"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
>
<option disabled selected value="0">Choose user</option>
<option
v-for="user in users"
:key="user.id"
v-bind:value="user.id"
>
{{ user.name }}
</option>
</select>
<div
v-if="form.errors.user_id"
v-text="form.errors.user_id"
class="text-red-500 text-xs mt-1"
></div>
</div>
<div class="mb-6">
<label
for="full_cost"
class="block mb-2 text-sm font-medium text-gray-90"
>Full Cost</label
>
<input
v-model="form.full_cost"
name="full_cost"
type="text"
id="full_cost"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
/>
<div
v-if="form.errors.full_cost"
v-text="form.errors.full_cost"
class="text-red-500 text-xs mt-1"
></div>
</div>
<div class="mb-6">
<label
for="products_id"
class="block mb-2 text-sm font-medium text-gray-900"
>Select products</label
>
<select
name="products_id"
multiple
v-model="form.products_id"
id="products_id"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
>
<option
v-for="product in products"
:key="product.id"
v-bind:value="product.id"
>
{{ product.name }}
</option>
</select>
<label
v-if="form.products_id.length != 0"
for="amoutn"
class="mt-6 block mb-2 text-sm font-medium text-gray-900"
>Amount</label
>
<template v-for="product in products" :key="product.id">
<template
v-for="product_id in form.products_id"
:key="product_id"
>
<template v-if="product.id == product_id">
<div class="flex justify-between py-5">
<span>{{ product.name }}</span>
<input type="hidden" v-bind:value="product.name" v-model="form.amount_of_products">
<input
v-model="form.amount_of_products"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5"
type="number"
id="amount"
name="amount"
min="0"
max="10000000000"
/>
</div>
</template>
</template>
</template>
<div
v-if="form.errors.products_id"
v-text="form.errors.products_id"
class="text-red-500 text-xs mt-1"
></div>
</div>
<div class="mb-6">
<label
for="date_of_order"
class="block mb-2 text-sm font-medium text-gray-900"
>Date of Order</label
>
<Datepicker
name="date_of_order"
id="date_of_order"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
v-model="form.date_of_order"
modelType="yyyy-MM-dd HH:mm:ss"
autoApply
/>
<div
v-if="form.errors.date_of_order"
v-text="form.errors.date_of_order"
class="text-red-500 text-xs mt-1"
></div>
</div>
<div class="mb-6">
<label
for="date_of_payment"
class="block mb-2 text-sm font-medium text-gray-90"
>Date of Payment</label
>
<Datepicker
name="date_of_payment"
id="date_of_payment"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
v-model="form.date_of_payment"
modelType="yyyy-MM-dd HH:mm:ss"
autoApply
/>
<div
v-if="form.errors.date_of_payment"
v-text="form.errors.date_of_payment"
class="text-red-500 text-xs mt-1"
></div>
</div>
<button
:disabled="form.processing"
type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center"
>
Submit
</button>
</form>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.products)
},
}
</script>
<script setup>
import { ref } from "vue";
import Datepicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import { useForm } from "@inertiajs/inertia-vue3";
let form = useForm({
delivery_adress: "",
full_cost: "",
date_of_order: "",
date_of_payment: "",
user_id: 0,
products_id: [],
amount_of_products: [],
});
let props = defineProps({
users: Object,
products: Object,
});
let submit = () => {
form.post("/order/create");
};
</script>
I thought of doing it like this: after selecting a product(s) from the multiselect, each selected product will appear below the multiselect, where you can see the picture of the product, its name, price, and most importantly - select the quantity of this product in the order. Perhaps with this image it will be easier for you to understand what I mean https://drive.google.com/file/d/1tXBZVYyz5f6ZH6SGA4zcGWdjuWSjADBO/view?usp=sharing
I was thinking of storing the product_id and the quantity of this product in one object, and storing these objects (if there are more than 1 products) in an array, and send this array to the back
Please or to participate in this conversation.