Question

我正在研究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>

Answer 1

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

第二种方法是只调用blade.php，然后调用两个模板。首先使用按钮和模态删除调用模板。然后，您从模态删除模板的内部$ emit该函数。

Vue.js emit events

我建议第二种方法，因为这样您就可以重用模态删除模板。

我向您展示了我的示例之一： 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按钮

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

1 个答案: