Javascript 使用Vue.js从阵列创建对象

我希望从数组中创建一个对象，添加一个额外的键和默认值。下面的数组是我想要创建的

        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>

{{title}}
餐
{{mean.text}
天
{{day.text}
{{day.text}
{{day.text}
餐数：{{所选餐数}
天数：{{selected_day}
学分：{{Credits}
可用膳食：{{膳食选择}
{{choice}}
选中的名称：{{select_.length}
已用信用：{{已用信用}
剩余学分：{{credits}
{{select}}
从“axios”导入axios；
导出默认值{
安装的（）{
log（'组件就绪'）；
//console.log（膳食选择）；
},
数据：函数（）{
返回{
标题：“加热和进食”，
精选餐：1，
选定日期：3，
学分：''，
已用学分：0，
选择餐：[]，
膳食选择：[]，
所选数量：0，
膳食：[
{文本：1，值：1}，
{文本：2，值：2}，
{文本：3，值：3}
],
日期：[
{文本：1，值：1}，
{文本：2，值：2}，
{文本：3，值：3}
],
膳食：[
{文本：1，值：1}，
{文本：2，值：2}，
{文本：3，值：3}
],
一日一餐：[
{文本：3，值：3}，
{文本：4，值：4}，
{文本：5，值：5}
],
两天一餐：[
{文本：3，值：3}，
{文本：4，值：4}，
{文本：5，值：5}
],
三天三餐：[
{文本：2，值：2}，
{文本：3，值：3}，
{文本：4，值：4}，
{文本：5，值：5}
]
}
},
创建（）{
var self=这个；
axios.get（“/feeds”）
.然后（功能（响应）{
self.fine_choices=response.data；
console.log（response.data）；
})
.catch（函数（错误）{
console.log（错误）；
});
},
道具：['value']，
方法：{
updateValue:函数（值）{
this.used_credits=+this.used_credits++值；
}
},
计算：{
creditsCal:function（）{
返回this.credits=this.selected_mean*this.selected_day；
},
过程：{
设置：函数（值）{
console.log（值）；
}
}
}
}

用

一日一餐

，

两日一餐

：你可以有一个变量，比如

n日一餐

，它将有

n日一餐

等，如下所示：

    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 }
            ]
        }
    },

  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>

现在我们可以在HTML中使用它，如下所示：

    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 }
            ]
        }
    },

  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>

天
{{day.text}

感谢您的回复，Saurabh。这些食物最初是这样摆放的，以便于眼睛检查。此阶段用于生成学分。我遇到的问题是在稍后的过程中，当我从包含菜单的Axios中拉入数组时。我希望将其修改为具有选定对象，以便可以根据用户输入调整选定的数字。这有意义吗？