如何将数据从父刀片传递到包含的模式？答案

【问题标题】：How to pass data from a parent blade to a included modal?如何将数据从父刀片传递到包含的模式？
【发布时间】：2020-04-02 18:46:08
【问题描述】：

我试图在单击按钮时调用模态并传递一个$incident 数组，然后该数组将传递给一个 Vue 组件的属性。您如何将数据从父刀片传递到包含的模式？我尝试使用数据附加，但我认为这是错误的。

我目前有一个表循环通过一个事件数组传递到我的刀片：

@foreach($incidents as $incident)
    <tr>
        <td>{{ $incident->service_now_incident_number }}</td>
        <td>{{ $incident->business_service_reference ?: 'N/A' }}</td>
        <td>{{ $incident->status }}</td>
        <td>{{ $incident->raised_date->format('d/m/y') }}</td>
        <td>{{ $incident->email }}</td>
        <td>
            <a class="btn btn-primary" data-toggle="modal" data-target="#incident-details-modal" data-attach="{{$incident}}">View</a>
        </td>
    </tr>
@endforeach

这是我试图将数据传递给的模式：

<div class="modal fade" id="incident-details-modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <incident-details :incident="{{$incident}}"></incident-details>
        </div>
    </div>
</div>

有没有办法在模态负载上传递数组数据？

【问题讨论】：

你在这里混合概念。为什么你同时使用 VueJS 和刀片？一些前端框架的重点是确保前端和后端是“独立的”和分离的。可以使用 REST 进行通信。
很好的答案，朋友欢呼。

标签： php html laravel vue.js

【解决方案1】：

您可以为此目的使用 $emit 方法。 v-on 指令捕获 $emit 发出的子组件事件

子组件触发点击事件：

export default {
  methods: {
    onClickButton (event) {
      this.$emit('clicked', 'someValue')
    }
  }
}

父组件接收点击事件：

<div>
  <child @clicked="onClickChild"></child>
</div>

export default {
  methods: {
    onClickChild (value) {
      console.log(value) // someValue
    }
  }
}

【讨论】：