时间戳

首页 > 解决方案 > 如何将数据从父刀片传递到包含的模式？

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

问题描述

我试图在单击按钮时调用模态并传递一个$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>

有没有办法可以通过模态负载上的数组数据？

标签： phphtmllaravelvue.js

解决方案

为此，您可以使用 $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
    }
  }
}

推荐阅读