I have managed to achieve the data movement however have two problems.
- If a checkbox is changed the total stays the same and doesnt deduct the unchecked food.
- Rather than adding the numbers together it seems to create a string of the selected numbers.
The process is a user selects the foods they would like from the menu using the checkboxes, once selected the food loads a number input below where they can input how many they would like and in turn calculates the number selected.
Please see code below:
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">{{title}}</div>
<div class="panel-body">
Meals
<select v-model="selected_meal" class="form-control">
<option v-for="meal in meals" v-bind:value="meal.value">
{{ meal.text }}
</option>
</select>
Days
<select v-model="selected_day" v-on:click="creditsCal" class="form-control">
<option v-if="selected_meal === 1" v-for="day in one_meal_days" v-bind:value="day.value">
{{ day.text }}
</option>
<option v-if="selected_meal === 2" v-for="day in two_meal_days" v-bind:value="day.value">
{{ day.text }}
</option>
<option v-if="selected_meal === 3" v-for="day in three_meal_days" v-bind:value="day.value">
{{ day.text }}
</option>
</select>
<span>Number of meals: {{ selected_meal }}</span>
<span>Number of days: {{ selected_day }}</span>
<span>Credits: {{ credits }}</span>
</div>
</div>
<span>Available Meals: {{ meal_choices }}</span>
<div class="panel panel-default" v-for="choice in meal_choices">
<div class="panel-heading">{{choice}}</div>
<input type="checkbox" v-bind:id="choice" v-bind:value="choice" v-model="select_meal" :disabled="select_meal.length > 2 && select_meal.indexOf(choice) === -1">
<div class="panel-body">
</div>
</div>
<span>Checked names: {{ select_meal.length }}</span>
<span>Used credits: {{ used_credits }}</span>
<span>Remaining credits: {{ credits }}</span>
<div class="panel panel-default" v-for="select in select_meal">
<div class="panel-heading">{{select}}</div>
<input type="number" class="form-control" v-on:input="updateValue($event.target.value)">
<div class="panel-body">
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
mounted() {
console.log('Component ready.');
// console.log(meal_choices);
},
data : function() {
return {
title: 'Heat and eat',
selected_meal: 1,
selected_day: 3,
credits: '',
used_credits: 0,
select_meal: [],
meal_choices: [],
number_selected: 0,
meals: [
{ text: 1, value: 1 },
{ text: 2, value: 2 },
{ text: 3, value: 3 }
],
day: [
{ text: 1, value: 1 },
{ text: 2, value: 2 },
{ text: 3, value: 3 }
],
meals: [
{ text: 1, value: 1 },
{ text: 2, value: 2 },
{ text: 3, value: 3 }
],
one_meal_days: [
{ text: 3, value: 3 },
{ text: 4, value: 4 },
{ text: 5, value: 5 }
],
two_meal_days: [
{ text: 3, value: 3 },
{ text: 4, value: 4 },
{ text: 5, value: 5 }
],
three_meal_days: [
{ text: 2, value: 2 },
{ text: 3, value: 3 },
{ text: 4, value: 4 },
{ text: 5, value: 5 }
]
}
},
created() {
var self = this;
axios.get('/meals')
.then(function (response) {
self.meal_choices = response.data;
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
},
methods: {
updateValue: function (value) {
his.used_credits = this.used_credits += value;
}
},
computed: {
creditsCal: function(){
return this.credits = this.selected_meal*this.selected_day;
}
}
}
</script>
To help visually below is a screenshot:
