Laravel 6 如何将参数传递给 Vue Js @click方法

Question

我想将一个参数传递给 Vue 组件。 请帮忙

叶片

@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>

Answer 1

Inyour Vue Js添加新的道具数组

<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>

在您的刀片中添加:p roduct_id ="产品 ID"，在添加到购物车组件中。

@extends("./layouts.app")
@section("title")
{{$shop->shop_name}}
@endsection

@section("content")
<addToCart :product_id="***product id goes here***"></addToCart>
@endsection

Answer 2

您应该按照以下步骤访问product_id

1. 在您的 addToCart 组件中，添加如下所示product_id：

   @section("content") <addToCart :product_id="$product_id"></addToCart> @endsection

2. 在您的组件中，您应该获得如下所示props array:product_id：

   <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>

注意 ：我想您有product_id并且您正确地执行组件的其他部分。