I want to pass a parameter to Vue component. please help
Blade
@extends("./layouts.app")
@section("title")
{{$shop->shop_name}}
@endsection
@section("content")
<addToCart></addToCart>
@endsection
Vue Js
<template>
<div class="button-container">
<button @click="addToCart(product_id)">Add To Cart</button>
</div>
</template>
In your Vue Js add new prop array
<template>
<div class="button-container">
<button @click="addToCart(product_id)">Add To Cart</button>
</div>
</template>
<script>
export default {
props: ["product_id"],
methods: {
addToCart(product_id)
{
//code
}
}
</script>
in your Blade add :product_id ="product id", in addToCart component.
@extends("./layouts.app")
@section("title")
{{$shop->shop_name}}
@endsection
@section("content")
<addToCart :product_id="***product id goes here***"></addToCart>
@endsection
You should follow these steps to access product_id
inside your addToCart component add product_id like this:
@section("content")
<addToCart :product_id="$product_id"></addToCart>
@endsection
in your component you should get the :product_id with props array like below :
<template>
<div class="button-container">
<button @click="addToCart(product_id)">Add To Cart</button>
</div>
</template>
<script>
export default {
props: ["product_id"],
methods: {
addToCart(product_id) {
//code
}
}
</script>
Note: I suppose that you have the product_id and you do the other part of component correct.
addToCartcomponent have any properties?