Updated to propogate child events.

src/components/search/SearchForm.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="columns">
     <div class="column">
-      <item-search v-model="search_term" v-on:input="$emit('input', searchFilter())" />
+      <item-search v-model.lazy="value.name_filter" v-on:input="$emit('input', $event.target.value)" />
     </div>
     <div class="column">
-      <season-filter />
+      <season-filter :value="value.season_filter" v-on:input="UpdateSeasons"/>
     </div>
     <div class="column">
-      <skill-filter />
+      <skill-filter :value="value.skill_filter" v-on:input="UpdateSkills" />
     </div>
   </div>
 </template>
@@ -19,25 +19,30 @@ import SkillFilter from '@/components/search/SkillFilter.vue'
 export default {
   name: 'search-form',
   props: {
-    search_term: {
+    value: {
       default () {
-        return ''
+        return {
-      },
+          name_filter: '',
-      search_seasons: {
+          season_filter: {
-        type: Array
+            selected_seasons: [],
-      },
+            season_exclusive: false
-      search_skills: {
+          },
-        type: Array
+          skill_filter: {
+            selected_skills: [],
+            skill_exclusive: false
+          }
+        }
       }
     }
   },
   methods: {
-    searchFilter: function () {
+    UpdateSeasons (val) {
-      return {
+      this.value.season_filter = val
-        search_term: this.search_term,
+      this.$emit('input', this.value)
-        search_seasons: this.search_seasons,
+    },
-        search_skils: this.search_skills
+    UpdateSkills (val) {
-      }
+      this.value.skill_filter = val
+      this.$emit('input', this.value)
     }
   },
   components: {

src/components/search/SeasonFilter.vue

@@ -5,8 +5,8 @@
     </div>
     <div class="field-body">
       <div class="field has-addons has-addons-centered">
-        <div class="control" v-for="season in seasons" :key="season.id">
+        <div class="control" v-for="season in seasons" :key="season.order">
-          <button-check>
+          <button-check :value="season.id" :checked="value.selected_seasons" v-on:change="UpdateSeasons">
             <span class="icon is-small">
               <season-icon :season="season"></season-icon>
             </span>
@@ -15,7 +15,7 @@
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <button-check class="is-fullwidth">
+          <button-check class="is-fullwidth" :checked="value.season_exclusive" v-on:change="UpdateExclusive">
             Exclusive
           </button-check>
         </div>
@@ -33,10 +33,30 @@ export default {
     SeasonIcon,
     ButtonCheck
   },
+  props: {
+    value: {
+      default () {
+        return {
+          selected_seasons: [],
+          season_exclusive: false
+        }
+      }
+    }
+  },
   computed: {
     seasons () {
       return this.$store.state.seasons
     }
+  },
+  methods: {
+    UpdateSeasons (val) {
+      this.value.selected_seasons = val
+      this.$emit('input', this.value)
+    },
+    UpdateExclusive (val) {
+      this.value.season_exclusive = val
+      this.$emit('input', this.value)
+    }
   }
 
 }

src/components/search/SkillFilter.vue

@@ -6,16 +6,16 @@
     <div class="field-body">
       <div class="field has-addons has-addons-centered">
         <div class="control" v-for="skill in skills" :key="skill.id">
-          <button-check>
+          <button-check :value="skill.id" :checked="value.selected_skills" v-on:change="UpdateSkills">
             <span class="icon is-small">
-              <skill-icon :skill="skill"></skill-icon>
+              <skill-icon :skill="skill" />
             </span>
           </button-check>
         </div>
       </div>
       <div class="field">
         <div class="control is-expanded">
-          <button-check class="is-fullwidth">
+          <button-check class="is-fullwidth" :checked="value.skill_exclusive" v-on:change="UpdateExclusive">
             Exclusive
           </button-check>
         </div>
@@ -34,17 +34,31 @@ export default {
     SkillIcon,
     ButtonCheck
   },
-  data () {
+  props: {
-    return {
+    value: {
-      selected_skills: []
+      default () {
+        return {
+          selected_skills: [],
+          skill_exclusive: false
+        }
+      }
     }
   },
   computed: {
     skills () {
       return this.$store.state.skills
     }
+  },
+  methods: {
+    UpdateSkills (val) {
+      this.value.selected_skills = val
+      this.$emit('input', this.value)
+    },
+    UpdateExclusive (val) {
+      this.value.skill_exclusive = val
+      this.$emit('input', this.value)
+    }
   }
-
 }
 </script>