Laravel + Vue：用 vue 模态模板编写的方法未定义答案

【问题标题】：Laravel + Vue : method written in vue modal template not definedLaravel + Vue：用 vue 模态模板编写的方法未定义
【发布时间】：2019-04-10 15:43:49
【问题描述】：

我正在开发 Laravel 应用程序的 CRUD 部分。

假设当点击一个条目的删除按钮时，会出现一个模态框，要求用户确认是否删除相应的条目。

我试过这样做，但是当我点击按钮时，它说在 chrome 浏览器的 JS 控制台中没有定义用 vue 模态模板编写的方法。

当然，我已经定义了它。为什么会发生这种情况以及如何解决？

如果有任何类似的例子可以演示如何在 vue 中做到这一点，请提供链接。谢谢！

这是我的前端代码的结构。

blade.php

<button id="show-modal" class="btn btn-danger"
@click="triggerDeleteModal($project)">
delete</button>
<modal-delete></modal-delete>

/resources/js/app.js

Vue.component('modal-delete', require('./components/ModalDelete.vue'));

/resources/js/components/ModalDelete.vue

<template>
<div class="modal fade" tabindex="-1" 
role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;
          </button>
          <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">
       Close</button>
      <button type="button" class="btn btn-primary">Save</button>
    </div>
  </div>
</div>
</div>
</template>

<script>
export default {
props: ['project'],
methods: {
  triggerDeleteModal(project) {
    alert('Did something!' + project + " - project : " + this.project);
  }
 }
}
</script>

【问题讨论】：

vuejs 看不到@click="triggerDeleteModal($project)。你应该在 vuejs 中定义它，而不是在刀片中。

标签： laravel laravel-5 vue.js laravel-blade

【解决方案1】：

这里有两个选择。首先，LakiGeri 提到您将按钮放在 vue-template 中。

第二种方法是调用blade.php 并调用两个模板。首先是带有按钮的模板和模态删除调用。在此之后，您从 modal-delete 模板内部 $emit 函数。

Vue.js emit events

我会建议第二种方式，因为这样您就可以重复使用 modal-delete 模板。

我给你看我的一个例子：create.blade.php

...
@section('content')
<p>Neues Raster anlegen</p>
<div class="col-md-12">
    <gridunits></gridunits>
</div>
@endsection

现在调用第一个模板gridunits。在这里面我转发了发出事件的方法删除并添加到第二个模板。

<template>
...
        <div class="form-group">
            <gridunititems
                v-for="gridunit in request.gridunits"
                :key="gridunit.id"
                :gridunit="gridunit"
                @remove="removeGridUnit"
                @add="addGridUnit"
            >
            </gridunititems>
        </div>
...
</template>

<script>
...
        methods: {
            addGridUnit(id) {
                //doing things
            },
            removeGridUnit(idToRemove) {
                //doing things
            },
...
</script>

第二个模板gridunititems

<template>
...
    <div class="input-group-append">
        <button type="button" class="btn btn-outline-success" @click.prevent="$emit('add',gridunit.id)">+</button>
    </div>
    <div class="input-group-append">
        <button type="button" class="btn btn-outline-danger" @click.prevent="$emit('remove',gridunit.id)">-</button>
    </div>
...
</template>

create.blade.php 调用第一个模板
gridunits.vue 在脚本中调用第二个模板和方法
gridunitsitems.vue 按钮发出事件

【讨论】：