access slots from component
by Saurabh Mimani
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
...
Babel + JSX
new Vue({
el: '#app',
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;
...