Как исправить пустую страницу после POST

Question

У меня есть приложение Rails 6 с VueJS 2.0 и Webpacker.Все работает, пока я не отправлю форму через POST, используя Rails.Я получаю пустую страницу, но если я обновляюсь, все снова хорошо.

Я пытался использовать $mount("#app") безрезультатно

Мой application.js выглядит так:

 require("@rails/ujs").start()
 import Vue from "vue/dist/vue.esm";
 import ExampleComponent from "../components/example_component.vue";

 document.addEventListener('DOMContentLoaded', () => {
  var app = new Vue({
   el: '#app',
   components: {
     ExampleComponent
   },
  })
 });

Мой application.html.erb выглядит следующим образом:

<%= javascript_pack_tag 'application' %>
<div id='app'>
  <%= yield %>
</div><!--/#app-->

Мой контроллер Rails возвращает следующее:

Started PATCH "/books/fsaddsdsf-1cb1c13b8fc6"
Processing by BooksController#update as HTML
Redirected to http://localhost:3000/books

Started GET "/books/fsaddsdsf-1cb1c13b8fc6"...
Processing by BooksController#show as HTML

Мои рельсовые формы являются просто стандартными <%= form_with %> формамис включенным local: true.Они прекрасно работают без javascript.

В консоли нет сообщений об ошибках Rails или VueJS, что странно.

Answer 1

Вы можете отправить форму, используя axios .Но чтобы предотвратить отправку формы по умолчанию с полным обновлением страницы, вам нужно добавить модификатор .prevent в кнопку отправки

<button @click.prevent="methodCall">Submit</button>