Rails + Vue Unexpected token u in JSON at position 0 - ruby-on-rails

Question

Even though rails 6 is still in beta I thought to test it out building a rails + vue app but when trying to parse the json data im getting a error in the console "VM353:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0" Not sure why my data is not being parsed. Undefined but cant figure out why
Here is my hello_vue.js file
import Vue from 'vue/dist/vue.esm'
import VueResource from 'vue-resource'
Vue.use(VueResource)
document.addEventListener('DOMContentLoaded', () => {
Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
var element = document.getElementById("gameapp-form")
if(element != null) {
var game_application = JSON.parse(element.dataset.game_application)
var app = new Vue({
el: element,
data: function () {
return { game_application: game_application}
},
methods: {
saveApplication: function() {
this.$http.post('/game_applications', {game_application: this.game_application }).then(response => {
console.log(response)
}, response => {
console.log(response)
})
}
}
})
}
}
)
Here is my _form.html.erb file
<%= content_tag :div,
id: "gameapp-form",
data: {
game_application: game_application.to_json(except: [:created_at, :updated_at]),
} do %>
<label>Game Name</label>
<input type="text" v-model="game_application.name" />
<label>Game Name</label>
<input type="text" v-model="game_application.video_link" />
<button v-on:click="saveApplication">Send Application</button>
<% end %>

Answer 1

Use response.data with your axios request
this.$http.post('/game_applications', {game_application: this.game_application})
.then(response => response.data)
.then(response => {
console.log(response)
})
Axios returns your JSON output in the data field. So, in the first then we are basically returning response.data so that you can use it in the next then. Hope that makes sense.