hello_vue.js

// 2 Models - instead of teams and players, I have products and variations

import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
import VueResource from 'vue-resource'

Vue.use(VueResource)

document.addEventListener('turbolinks:load', () => {
  Vue.http.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

  var element = document.getElementById("product-form")
  if (element != null) {

    var id = element.dataset.id
    var product = JSON.parse(element.dataset.product)
    var variations_attributes = JSON.parse(element.dataset.variationsAttributes)
    variations_attributes.forEach(function(variation) { variation._destroy = null })
    product.variations_attributes = variations_attributes

    var app = new Vue({
      el: element,
      // mixins: [TurbolinksAdapter],
      data: function() {
        return { id: id, product: product }
      },
      methods: {
        addVariation: function() {
          this.product.variations_attributes.push({
            id: null,
            name: "",
            //position: "",
            _destroy: null
          })
        },

        removeVariation: function(index) {
          var variation = this.product.variations_attributes[index]

          if (variation.id == null) {
            this.product.variations_attributes.splice(index, 1)
          } else {
            this.product.variations_attributes[index]._destroy = "1"
          }
        },

        undoRemove: function(index) {
          this.product.variations_attributes[index]._destroy = null
        },

        saveProduct: function() {
          // Create a new product
          if (this.id == null) {
            this.$http.post('/products', { product: this.product }).then(response => {
              Turbolinks.visit(`/products/${response.body.id}`)
            }, response => {
              console.log(response)
            })

          // Edit an existing product
          } else {
            this.$http.put(`/products/${this.id}`, { product: this.product }).then(response => {
              Turbolinks.visit(`/products/${response.body.id}`)
            }, response => {
              console.log(response)
            })
          }
        },

        existingProduct: function() {
          return this.product.id != null
        }

      }
    })

  }
})