使用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>