FIX broken vuex stuff

donal

2018-04-04 e3884467d3cf833d690ad22dd05b9133fcb4091f

 src/components/TodoItem.vue

@@ -10,9 +10,9 @@
      <!-- Material design checkbox not displaying, EDIT: Still can't figure out why it's not displaying -->
      <!-- <md-checkbox :v-model="isActive">x</md-checkbox> -->
      <!-- <input type="checkbox" v-model="todoItem.complete"/> -->
      <checkbox v-model="todoItem.complete"/> 
      <checkbox v-model="todoItem.completed"/> 

      <span class="md-list-item-text" :class="{'strike-through': todoItem.complete}">{{ todoItem.title }}</span>
      <span class="md-list-item-text" :class="{'strike-through': todoItem.completed}">{{ todoItem.title }}</span>
      <!-- find a nice way to utilise svg fill property without doing it inline -->
      <md-button 
        @click="markImportant"
@@ -27,11 +27,10 @@
  </div>
</template>
<script>

import Vue from "vue";
import {Checkbox, Radio} from 'vue-checkbox-radio';
Vue.component('checkbox', Checkbox);
Vue.component('radio', Radio);
import { Checkbox, Radio } from "vue-checkbox-radio";
Vue.component("checkbox", Checkbox);
Vue.component("radio", Radio);

export default {
  name: "TodoItem",
@@ -48,17 +47,19 @@
  methods: {
    markDone() {
      // Delete me below even if it works DEMO PURPOSE ONLY
      this.todoItem.complete = !this.todoItem.complete;

      // Do we need to add a new action/mutation to change todo.x? 
      this.todoItem.completed = !this.todoItem.completed;
      // debugger;
      // this.$store.dispatch("setNewTodo", this.todoItem);
      // this.$store.dispatch("updateTodo", this.todoItem);
      // this.$store.dispatch("clearNewTodo");
      // Do we need to add a new action/mutation to change todo.x?
      // this.$store.dispatch("setNewTodo", this.newTodo)
      
      
      console.info("INFO - ", this.todoItem, this.todoItem.complete);

      console.info("INFO - ", this.todoItem, this.todoItem.completed);
    },
    markImportant() {
      // set to greyed out / true false
      this.todoItem.important = !this.todoItem.important;
      // this.$store.dispatch("updateTodo", this.todoItem);
      console.info("INFO - ", this.todoItem, this.todoItem.important);
    }
  }