_form.html.erb

<%= content_tag :div, id: "team-form", data: { team: team.to_json(except: [:created_at, :updated_at]), players_attributes: team.players.to_json(except: [:team_id, :created_at, :updated_at]) } do %>

  <label for="team_name">Team Name</label>
  <input id="team_name" v-model="team.name" />

  <h4>Players</h4>
  <div v-for="(player, index) in team.players_attributes">
    <div v-if="player._destroy == '1'">
      {{ player.name }} will be removed
      <button v-on:click.prevent="undoDelete(index)">Undo</button>
      <hr />
    </div>
    <div v-else>
      <label for="name">Player Name: </label>
      <input id="name" v-model="player.name">

      <br />
      <button v-on:click.prevent="removePlayer(index)">Remove</button>

      <hr />
    </div>
  </div>

  <button v-on:click.prevent="addPlayer">Add Player</button>

  <button v-on:click.prevent="saveTeam">Save Team</button>
<% end %>

application.js

/* eslint no-console: 0 */
// Run this example by adding <%= javascript_pack_tag 'hello_vue' %>
// to the head of your layout file,
// like app/views/layouts/application.html.erb.
// All it does is render <div>Hello Vue</div> at the bottom of the page.

import Vue from 'vue/dist/vue.esm'
import App from './app.vue'
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("team-form")
  var team = JSON.parse(element.dataset.team)
  var players_attributes = JSON.parse(element.dataset.playersAttributes)
  players_attributes.forEach(function(player) { player._destroy = null })
  team.players_attributes = players_attributes

  var app = new Vue({
    el: element,
    components: { App },
    mixins: [TurbolinksAdapter],
    data: function() {
      return {
        team: team
      }
    },
    methods: {
      addPlayer: function() {
        this.team.players_attributes.push({
          id: null,
          name: "",
          position: "",
          _destroy: null
        })
      },
      removePlayer: function(index) {
        var player = this.team.players_attributes[index]

        if (player.id === null) {
          this.team.players_attributes.splice(index, 1)
        } else {
          this.team.players_attributes[index]._destroy = "1"
        }
      },
      undoDelete: function(index) {
        this.team.players_attributes[index]._destroy = null
      },

      saveTeam: function() {
        // New record
        if (this.team.id == null) {
          this.$http.post('/teams', {team: this.team}).then(response => {
            window.location = response.url
          }, response => {
            console.log(response)
          })

        //
        } else {
          console.log(JSON.stringify(this.team))
          this.$http.put(`/teams/${this.team.id}`, {team: this.team}).then(response => {
            window.location = response.url
          }, response => {
            console.log(response)
          })
        }

      }

    }
  })
})