Вызов метода с кнопки vue bootstrap останавливает рендеринг страницы

Question

Это кнопка в моем HTML

<b-button variant="danger" id="toggle-btn" @click="delete">Delete</b-button>

Если я уберу вызов метода (@ click = "delete), моя страница отобразится, если я оставлю ее там, то ничего не отобразится экран. но также нет ошибок в консоли.

Здесь я экспортирую свои методы и объявляю метод удаления:

methods: {
      showModal() {
        this.$refs['my-modal'].show()
      },
      hideModal() {
        this.$refs['my-modal'].hide()
      },
      toggleModal() {
        // We pass the ID of the button that we want to return focus to
        // when the modal has hidden
        this.$refs['my-modal'].toggle('#toggle-btn')
      },
      delete() {
        fetch('https://localhost:44328/api/Skill/' + this.$route.params.id, {
        method: 'delete'
      })
      }
    }

Я искал далеко и широко и могу не найти ответ. Любая помощь приветствуется:)

Answer 1

Я не знаю, что происходит с вашими ошибками, но я сделал небольшую скрипку на основе вашего кода и получаю эту ошибку в консоли

avoid using JavaScript keyword as property name: "delete" Raw expression: @click="delete"

Я предлагаю вам изменить имя вашего метода - не ключевое слово js, возможно deleteSkill.

new Vue({
  el: "#app",
  methods: {
    delete() {
      console.log("Delete");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="delete">DELETE</button>
</div>