Laravel Vuejs如何从调用方传递组件数据

“我的主页”显示来自控制器的数据列表，其中包含

foreach

@foreach ($sales as $sale)
    <button id="{{$sale->id}}" @click="editClicked({{$sale}})">
@endforeach

在

Edit.vue

中声明了简要的组件：

<template name="edit">
    ...
</template>

...

这只是一个带有输入字段的标准表单，通过v-model绑定到

sale

data:{
  selectedSale: null
}

本质上，它是一个更新表单，我打算将数据从主页加载到每个要编辑的输入字段中

My app.js只需设置

showEditModal=true

，即可在主页顶部显示编辑表单

基本上，我不想在加载模式时通过GET方法调用controller，因为我在主页上已经有了作为

$sale

对象的数据，所以我只是想知道如何将

$sale

传递到Edit.vue组件

我认为在

组件使用中，它需要绑定

sale

对象，但是我不确定该如何工作，因为它来自foreach循环

---

我有，app.js方法中的数据也是通过

@click=“editClicked（{{{$sale}}}）”

传入的，但同样，我不确定如何使用它来传递？

您是对的，您希望将当前的

sale

项作为属性传递给编辑模式。我要做的是在主Vue中添加一个名为

selectedSale

的数据属性

data:{
  selectedSale: null
}

然后在您的

edit中单击

方法，设置

selectedSale

methods:{
  editClicked(sale){
    this.selectedSale = sale
    ...
  }
}

最后，将其作为属性传递

<edit :sale="selectedSale" v-if="showEditModal" @hide="showEditModal=false"></edit>