Rails + Vue Неожиданный токен в JSON в позиции 0

Question

Несмотря на то, что rails 6 все еще находится в бета-версии, я подумал протестировать его при создании приложения rails + vue, но при попытке анализа данных json я получаю сообщение об ошибке в консоли "VM353: 1 Uncaught SyntaxError: Неожиданный токен u в JSONв позиции 0 "Не уверен, почему мои данные не анализируются.Не определено, но не могу понять, почему

Вот мой файл hello_vue.js

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)
                        })
                    }
                }
              })

            }
        }

    )

Вот мой файл _form.html.erb

<%= 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

Используйте response.data с вашим запросом axios

this.$http.post('/game_applications', {game_application: this.game_application})
          .then(response => response.data)
          .then(response => {
            console.log(response)
          })

Axios возвращает ваш вывод JSON в поле data.Итак, в первом then мы в основном возвращаем response.data, чтобы вы могли использовать его в следующем then.Надеюсь, что это имеет смысл.