ingredient checking

vue/src/components/Ingredient.vue

@@ -1,7 +1,8 @@
 <template>
-    <tr>
+    <tr @click="$emit('checked-state-changed', ingredient)">
       <td>
-        <input type="checkbox">
+        <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
+        <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
       </td>
       <td>
         <span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
@@ -39,6 +40,11 @@ export default {
       default: 1,
     }
   },
+  data() {
+    return {
+      checked: false
+    }
+  },
   methods: {
     calculateAmount: function (x) {
       return calculateAmount(x, this.servings)

vue/src/components/Step.vue

@@ -34,7 +34,7 @@
             <table class="table table-sm">
               <!-- eslint-disable vue/no-v-for-template-key-on-child -->
               <template v-for="i in step.ingredients">
-                <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
+                <Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
               </template>
               <!-- eslint-enable vue/no-v-for-template-key-on-child -->
             </table>