[Vuejs]-Create an object from array using Vue.js

by

0👍

Instead of having one_meal_days, two_meal_days: you can have one variable say n_meal_days which will have n_meal_days[0] as one_meal_days and so on, like following:

    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 }
            ],
            n_meal_days: [[
              { text: 3, value: 3 },
              { text: 4, value: 4 },
              { text: 5, value: 5 }
            ],
            [
              { text: 3, value: 3 },
              { text: 4, value: 4 },
              { text: 5, value: 5 }
            ],
            [
              { text: 2, value: 2 },
              { text: 3, value: 3 },
              { text: 4, value: 4 },
              { text: 5, value: 5 }
            ]
        }
    },

Now we can use this in the HTML like following:

  Days
  <select v-model="selected_day" v-on:click="creditsCal" class="form-control">
    <option v-for="day in n_meal_days[selected_meal]" v-bind:value="day.value">
      {{ day.text }}
    </option>
  </select>

Leave a comment