Erstellen Sie ein Objekt aus Array mit Vue.js

Question

Ich suche ein Objekt aus einem Array zu erstellen, einen zusätzlichen Schlüssel und Standardwert hinzufügen. Das Array unten ist was ich erstellen möchte.

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

Das Array für das Essen ist unten:

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

Wie würde ich den ausgewählten Schlüssel hinzuzufügen. Der Wert hierfür würde von einer Eingabe geliefert werden.

Der vollständige Code, mit dem ich gearbeitet habe, ist unten. Ich bin sicher, dass ich es mit meinem Code arbeiten lassen kann, nur um den Prozess dafür mit Vue.js zu klären.

<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

Statt one_meal_days zu haben, two_meal_days: Sie eine Variable n_meal_days sagen kann, welche n_meal_days[0] als one_meal_days und so weiter, wie folgt erhalten wird:

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

Jetzt können wir diese verwenden im HTML wie folgende:

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>