我正在寻找创建一个对象从一个数组添加一个额外的关键字和默认值。下面的数组是我希望创建的。

meal_choices: [
           eggs:{ selected: 0 },
           fish:{ selected: 0 },
           rice:{ selected: 0 },
        ]

膳食的数组如下所示：

select_meal:Array[3]
0:"eggs"
1:"fish"
2:"rice"

我将如何添加所选的键。这个键的值将从输入中提供。
下面是我一直在使用的完整代码。我相信我可以用我的代码使它工作，只需要清理一下用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>