Multiple checkboxes, bound to the same Array using dynamically cheated data in Vue.js 2.0

Question

I am trying to recreate to use multiple checkboxes, bound to the same array to get a customers selection.

I am following the details provided in the docs.

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

The only difference is that the values and ID's are generated from a v-for loop.

My Code

        <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="selected_meal">
            <div class="panel-body">
              <span>Checked names: {{ selected_meal }}</span>
            </div>
        </div>

I do have selected_meal in the data.

This results in the following where all checkboxes are checked and once clicked they all respond together as true or false.

UPDATE FULL CODE

<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>
                <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">
                  <div class="panel-body">
                    <span>Checked names: {{ select_meal }}</span>
                  </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: '',
                select_meal: '[]',
                meal_choices: '[]',
                className: false,
                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: {

        },

        computed: {
          creditsCal: function(){
            return this.credits = this.selected_meal*this.selected_day;
          }
        }
    }
</script>

Answer 1

You just need to make sure selected_meal is an array:

new Vue({
  el: '#app',
  data: {
    meal_choices: ['Eggs', 'Fries', 'Cheese'],
    selected_meal: []
  }
});

Here's the JSFiddle: https://jsfiddle.net/49yng51p/