Laravel + Vue: метод, написанный в модальном шаблоне vue, не определен

Question

Я работаю над CRUD-частью приложения Laravel.

Предполагается, что при нажатии кнопки удаления записи появляется модальное окно и просит пользователя подтвердить удаление соответствующей записи или нет.

Я пытался сделать это, но он сказал, что метод, написанный в модальном шаблоне vue, не был определен в консоли JS браузера Chrome, когда я нажал кнопку.

Конечно, я определил это. Почему это происходит и как это исправить?

Если есть какой-либо подобный пример, который демонстрирует, как это сделать в vue, пожалуйста, предоставьте ссылку. Спасибо!

Это структура моего кода интерфейса.

Клинок.php

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

/ ресурсы / JS / app.js

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

/ ресурсы / JS / компоненты / 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 и вызываете два шаблона. Сначала шаблон с кнопкой и вызовом модального удаления. И после этого вы $ испускаете функцию изнутри шаблона модального удаления.

Vue.js отправляет события

Я бы предложил второй способ, потому что вы можете повторно использовать шаблон удаления модал.

Я покажу вам один из моих примеров: create.blade.php

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

Теперь вызывается первый шаблон gridunits . Внутри этого я пересылаю методы удаления событий emit и добавляю ко второму шаблону.

<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 кнопка, генерирующая событие