store + form validation wip

src/components/QuestionButtons.vue

  <template>
   <v-row>
     <v-btn @click="back">Revenir</v-btn>
-    <v-btn @click="submit">Continuer</v-btn>
+    <v-btn @click="submitClick" type="submit">Continuer</v-btn>
   </v-row>
 </template>
  
@@ -11,6 +11,9 @@ export default {
   methods: {
     back() {
       this.$router.go(-1);
+    },
+    submitClick() {
+      this.$emit("submit");
     }
   }
 };

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-//import store from './store/'
+import store from './store/'
 import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
@@ -9,6 +9,6 @@ Vue.config.productionTip = false
 new Vue({
   vuetify,
   router,
-  //store,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/router.js

@@ -68,7 +68,7 @@ export default new Router({
       ]
     },
     {
-      path: '/aides-possibles',
+      path: '/resultats',
       name: 'results',
       component: Results
     },

src/store/modules/results.js

-import ClaraService from "@/api/clara";
+//import ClaraService from "@/api/clara";
 
 export default {
     state: {
@@ -22,21 +22,21 @@ export default {
         }
     },
     actions: {
-        getFilters({ commit }) {
-            // promise + fetch + API call
-        },
-        getResults({ commit, dispatch }) {
-            // promise + fetch + API call
-            this.$store.commit("updateChanged", false)
-        },
+        // getFilters({ commit }) {
+        //     // promise + fetch + API call
+        // },
+        // getResults({ commit, dispatch }) {
+        //     // promise + fetch + API call
+        //     this.$store.commit("updateChanged", false)
+        // },
     },
     getters: {
         eligible: state => state.eligible,
-        eligible_quantity: state => state.eligible.length(),
+        eligible_quantity: state => state.eligible.length,
         non_eligible: state => state.nonEligible,
-        non_eligible_quantity: state => state.nonEligible.length(),
+        non_eligible_quantity: state => state.nonEligible.length,
         //uncertain: state => state.uncertain,
         filters: state => state.filters,
-        filters_quantity: state => state.filters.length(),
+        filters_quantity: state => state.filters.length,
     },
 }
\ No newline at end of file

src/store/modules/situation.js

-import ClaraService from "@/api/clara";
+//import ClaraService from "@/api/clara";
 
 export default {
     state: {
@@ -48,9 +48,9 @@ export default {
 
     },
     actions: {
-        submitInscription({ commit }, inscription_period) {
+        // submitInscription({ commit }, inscription_period) {
 
-        },
+        // },
         submitAddress({ commit, state }, location_citycode) {
             if (location_citycode != state.location_citycode) {
                 commit('updateLocationCitycode', location_citycode)
@@ -63,7 +63,6 @@ export default {
                 commit('updateAge', age)
                 commit('updateChanged', true)
             }
-            this.$router.push('grade')
         },
         submitAllocation({ commit, state }, allocation_type) {
             if (allocation_type != state.allocation_type) {

src/views/Questions.vue

  <template>
   <v-content>
     <v-card>
-      <v-form>
-        <router-view></router-view>
-        <QuestionButtons></QuestionButtons>
-      </v-form>
+      <router-view></router-view>
     </v-card>
   </v-content>
 </template>
  
  <script>
-import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  name: "Questions",
-  components: {
-    QuestionButtons
-  }
+  name: "Questions"
 };
 </script>
  

src/views/questions/ARE.vue

  <template>
-  <v-card>
+  <v-form>
     Quel est le montant de cette allocation ?
     <v-text-field single-line type="number" label="Montant par mois"></v-text-field>
-  </v-card>
+    <QuestionButtons @submit="submit"></QuestionButtons>
+  </v-form>
 </template>
  
  <script>
+import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  name: "ARE"
+  components: {
+    QuestionButtons
+  },
+  name: "ARE",
+  methods: {
+    submit() {
+      this.$router.push("votre-age");
+    }
+  }
 };
 </script>
  

src/views/questions/Address.vue

  <template>
-  <v-card>
+  <v-form>
     Quel est votre code postal de votre lieu de résidence ?
     Code postal - facultatif
     **Plus que 2 questions avant d'obtenir vos résultats**
     <v-text-field single-line type="number" label="Exemple : 44220"></v-text-field>
-  </v-card>
+    <QuestionButtons @submit="submit"></QuestionButtons>
+  </v-form>
 </template>
+ 
  <script>
+import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  name: "Address"
+  components: {
+    QuestionButtons
+  },
+  name: "Address",
+  methods: {
+    submit() {
+      //this.$store.dispatch("submitAddress", this.??);
+      this.$router.push("autres-situations");
+    }
+  }
 };
 </script>
  

src/views/questions/Age.vue

  <template>
-  <v-card>
+  <v-form>
     Quel est votre âge ?
-    <v-text-field single-line type="number"></v-text-field>
-  </v-card>
+    <v-text-field
+      v-model.number="age"
+      single-line
+      type="number"
+      v-validate="'required|min:16'"
+      :rules="rules"
+    ></v-text-field>
+    <QuestionButtons @submit="submit"></QuestionButtons>
+  </v-form>
 </template>
  
  <script>
+import QuestionButtons from "@/components/QuestionButtons";
 export default {
-  name: "ARE"
+  name: "Age",
+  components: {
+    QuestionButtons
+  },
+  computed: {
+    age: {
+      get() {
+        return this.$store.state.situation.age;
+      },
+      set(value) {
+        this.$store.dispatch("submitAge", value);
+      }
+    }
+  },
+  data: () => ({
+    rules: [
+      value => !!value || "Required."
+      // value => value || >= 15 || 'doit être supérieur ou égal à 16',