问题
In my sign in page, didn't work redirect by Turbolinks.
This page use form for sign in. After posting form correct information, browser end up going to original page.
I'm implementing sign in page with Ruby on Rails
and Vue.js
.
In loading, I use Turbolinks
, so I did Vue.js
plugin vue-turbolinks
, too.
Rails: 5.2.2
Ruby: 2.5.1
Turbolinks: 5
vue-turbolinks: 2.0.4
webpacker: 3.5
user_controller.rb
# coding: utf-8
class UsersController < ApplicationController
def new
@user = User.new
end
def create
@user = User.new(user_params)
if @user.save
flash[:success] = "registing user data"
redirect_to '/'
else
flash[:danger] = "invalid info"
redirect_to '/signup'
end
end
private
def user_params
params.require(:user).permit(:user_name, :email, :password, :password_confirmation)
end
new.html.erb
<h1>Add</h1>
</div>
<%= javascript_pack_tag 'new' %>
<div>
new.vue
<template>
<form accept-charset="UTF-8">
<input type="text" v-model="username" placeholder="username">
<input type="text" v-model="email" placeholder="email">
<input type="password" v-model="password" placeholder="password">
<input type="password" v-model="password_confirm" placeholder="password(confirm)">
<button type="submit" v-on:click="sendForm">send</button>
</form>
</template>
<script>
import axios from 'axios';
const token = document.getElementsByName("csrf-token")[0].getAttribute("content");
axios.defaults.headers.common["X-CSRF-Token"] = token;
axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["charset"] = "utf-8";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
export default {
data: function() {
return {
username: "",
email: "",
password: "",
password_confirm: ""
}
},
methods: {
sendForm: function(e){
axios.post("/signup", {
"user": {
"user_name": this.username,
"email": this.email,
"password": this.password,
"password_confirmation": this.password_confirm,
}
})
.then(response => {
})
.catch(response => {
});
}
}
}
</script>
new.js
import Vue from 'vue';
import New from '../new.vue';
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter);
document.addEventListener('turbolinks:load', () => {
const el = document.body.appendChild(document.createElement('new'));
const new_ = new Vue({
el,
render: h => h(New)
});
console.log('/new page');
});
I expect the after loading, browser go to root page in correct registing.
回答1:
/vueturbo.js
if (typeof(Vueturbo) === 'undefined') {
Vueturbo = {};
}
Vueturbo.Dispatcher = function() {
this.dispatch = function() {
var elements = $('.sjs');
var cls, meth;
$(elements).each(function (index, element) {
tokens = $(element).attr('data-cls').split('.');
meth = $(element).attr('data-method') || 'fire';
context = window;
$(tokens).each(function(tidx, token) {
context = context[token];
});
cls = new (context)();
cls[meth]();
});
};
this.turbolinks = function() {
var ref = this;
document.addEventListener('turbolinks:load', function() {
ref.dispatch();
});
};
};
insert the tag and dispatcher callings in templates ../views/layouts/public.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script charset="utf-8">(new Vueturbo.Dispatcher()).turbolinks();</script>
...
<%= yield %>
...
insert the tag calling the js that you want ../views/public/new.html.erb
<%= hidden_field_tag nil, 'new', class: 'sjs', 'data-cls': 'Vueturbo.new' %>
/new.js
import Vue from 'vue';
import New from '../new.vue';
import TurbolinksAdapter from 'vue-turbolinks';
Vue.use(TurbolinksAdapter);
Vueturbo.new = function() {
this.fire = function() {
const el = document.body.appendChild(document.createElement('new'));
const new_ = new Vue({
el,
render: h => h(New)
});
}
}
来源:https://stackoverflow.com/questions/54178315/how-to-fix-didnt-work-redirect-by-turbolinks-in-ruby-on-rails-with-vue-js