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でこれを行うためのプロセスをクリアする必要があるだけで、自分のコードで動作させることができると確信しています。その代わりone_meal_days、two_meal_daysを持つの

<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

：

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のようにこれを使用することができます：あなたは一つの変数を持つことができますが、以下のようなので、上のone_meal_daysとしてn_meal_days[0]を持っているとなるn_meal_daysを言います以下：

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>