I am looking to create an object from an array adding an additional key and default value. The array below is what I wish to create.
meal_choices: [
eggs:{ selected: 0 },
fish:{ selected: 0 },
rice:{ selected: 0 },
]
The array for the meal is below:
select_meal:Array[3]
0:"eggs"
1:"fish"
2:"rice"
How would I add the selected key. The value for this would be supplied from an input.
The full code of what I have been working with is below. I am sure I can make it work with my code just need to clear up the process for doing this with Vue.js.
<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" v-on:input=process($event.target.value) :disabled="select_meal.length > 2 && select_meal.indexOf(choice) === -1">
<div class="panel-body">
</div><!--v-model="select_meal"-->
</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);
});
},
props: ['value'],
methods: {
updateValue: function (value) {
this.used_credits = +this.used_credits + +value;
}
},
computed: {
creditsCal: function(){
return this.credits = this.selected_meal*this.selected_day;
},
process:{
set: function(value){
console.log(value);
}
}
}
}
</script>
