使用Vue.js从数组创建对象

Question

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

        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>

Answer 1

而不是one_meal_days，two_meal_days：您可以将一个变量称为n_meal_days，n_meal_days[0]为one_meal_days，依此类推，如下所示：

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

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

  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>