Question

我的主页面使用foreach

呈现来自控制器的数据列表

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

我在页面上放置了一个edit组件，我通过showEditModal条件

以模态方式显示它

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

简要的组件在Edit.vue：

中声明

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

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

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

我的app.js只设置showEditModal = true，以便在主页顶部显示编辑表单。

基本上我不想在加载模态时通过GET方法调用控制器，因为我已经将主页中的数据作为$sale对象，所以我只是想知道如何传递{ {1}}到Edit.vue组件？

我认为在$sale组件使用中，它需要绑定<edit>对象，但是我不确定它是如何工作的，因为它来自foreach循环。

我也是，通过sale传递了app.js方法中的数据，但同样，我不确定如何使用它来传递？

Answer 1

您是对的，您可能希望将当前sale项作为属性传递给编辑模式。我要做的是向主Vue添加一个名为selectedSale的数据属性。

data:{
  selectedSale: null
}

然后在editClicked方法中设置selectedSale

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

最后，将其作为财产传递。

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