Vue v-model tests

Using vuex

by jamesbrndwgn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://npmcdn.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<div id="app">
    <div class="column">
        <div class="inner">
            <h2>Example 1</h2>
            Vuex won't let me do it like this and should generate the error:
            <strong>
                [vuex] Do not mutate vuex store state outside mutation handlers.
            </strong>
            <div v-for="team in teams">
                
                <h4>
                    {{team.name}}
                </h4>
                <div v-for="shift in team.shifts">
                    {{users[shift.user_id]}}
                    <input :value="shift.time" @input="runMutation"/>
                </div>
            </div>
            <pre>{{getJson(teams)}}</pre>
        </div>
    </div>
    <div class="column">
        <div class="inner">
            <h2>Example 2</h2>
            Trying to use the method of passing parameters to a computed value from here: https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-computed-properties-in-vue-js
            <div v-for="team in teams">
                <h4>
                    {{team.name}}
                </h4>
                <div v-for="shift in teamShifts(team.id)">
                    {{users[shift.user_id]}}
                    <input v-model="shift.time"/>
                </div>
            </div>
            <pre>{{getJson(teams)}}</pre>
        </div>
    </div>
</div>

CSS

.column{
    width: 50%;
    float: left;
}
.inner{
    padding: 5px;
}

Babel + JSX

let store = new Vuex.Store({
    state: {
    	users: {
            1: 'John',
            2: 'Mary',
            3: 'Nick',
            4: 'Jane',
        },
        teams: {
            1: {
                id: 1,
                name: 'Team 1',
                shifts: [
                    {
                        id: 1,
                        time: '10am',
                        user_id: 1
                    },
                    {
                        id: 2,
                        time: '2pm',
                        user_id: 2
                    },
                    {
                        id: 3,
                        time: '5pm',
                        user_id: 2
                    }
                ]
            },
            2: {
                id: 2,
                name: 'Team 2',
                shifts: [
                    {
                        id: 4,
                        time: '9am',
                        user_id: 3
                    },
                    {
                        id: 5,
                        time: '1pm',
                        user_id: 3
                    },
                    {
                        id: 6,
                        time: '4pm',
                        user_id: 4
                    }
                ]
            }
        }
    },
    getters: {
        teams: state => state.teams,
        users: state => state.users
    },
    strict: true,
})
var app = new Vue({
  el: "#app",
  store,
  data: {
 	
  },
  computed: {
	  teams: {
      	get(){
	        return store.getters.teams;
        }
      },
	  users: {
      	get(){
	        return store.getters.users;
        }
      },
    teamShifts() {
        return team_id => {
          return {
            get(){
              return store.getters.teams[team_id].shifts;
              },
              set(value){
                console.log(value);
              }
          }
        };
     }
  },
  methods: {
 ...