Usng Vue.js, um dynamisch erstellte Eingaben an ein Array zu senden

Question

Was wäre der beste Prozess, um dynamisch erstellte Eingaben an ein Array zu senden. Idealerweise möchte ich ein Array in den Daten mögen.

customer_answers: [1,4,5,6,8] 

Die Elemente im Array sind die Werte der Antworten. Ich verstehe, dass jede Antwort geschoben werden müsste und wahrscheinlich on:change verwenden, um eine Methode auszuführen.

Wie aber würde ich jede Frage identifizieren, wo die Fragen und Antworten und dynamisch?

Der Code Fragen unter:

   <div v-for="(question, item) in questions.questions"> 
       {{question.question}} 
       <div v-if="grouped_answers"> 
        <div v-for="a in grouped_answers[item].answers"> 
        <label>{{a.answer}}</label> 
        <div v-if= "question.type === 'radio'"> 
         <input type="radio" v-bind:value="a.id"> 
        </div> 
        <div v-if= "question.type === 'checkbox'"> 
         <input type="checkbox" v-bind:value="a.id"> 
        </div> 
        </div> 
       </div> 
       </div> 

Der vollständige Code, wenn es unten hilft:

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div v-for="app in appliances"> 
       <input type="radio" id="one" v-model="appliance" v-bind:value="app.id" v-on:change="getQuestions"> 
       <label for="one">{{app.appliance}}</label> 
       </div> 
       <br> 
       <span>Picked: {{appliance}}</span> 
       </br> 
       </br> 
       <div v-for="co in brands"> 
        <input type="radio" id="two" v-model="brand" v-bind:value="co.id"> 
        <label for="one">{{co.brand}}</label> 
       </div> 
       <span>Picked: {{ brand }}</span> 
       </br> 
       </br> 
       <input type="radio" id="one" value=1 v-model="age"> 
       <label for="one">1 Year</label> 
       <br> 
       <input type="radio" id="two" value=2 v-model="age"> 
       <label for="two">2 Years</label> 
       <br> 
       <input type="radio" id="two" value=3 v-model="age"> 
       <label for="two">3 Years</label> 
       <br> 
       <input type="radio" id="two" value=4 v-model="age"> 
       <label for="two">4 Years</label> 
       <br> 
       <input type="radio" id="two" value=5 v-model="age"> 
       <label for="two">5 Years</label> 
       <br> 
       <input type="radio" id="two" value=6 v-model="age"> 
       <label for="two">6 Years</label> 
       <br> 
       <input type="radio" id="two" value=7+ v-model="age"> 
       <label for="two">7+ Years</label> 
       <br> 
       <span>Picked: {{ age }}</span> 
       <br> 
       <br> 
       <div v-for="(question, item) in questions.questions"> 
       {{question.question}} 
       <div v-if="grouped_answers"> 
        <div v-for="a in grouped_answers[item].answers"> 
        <label>{{a.answer}}</label> 
        <div v-if= "question.type === 'radio'"> 
         <input type="radio" v-bind:value="a.id"> 
        </div> 
        <div v-if= "question.type === 'checkbox'"> 
         <input type="checkbox" v-bind:value="a.id"> 
        </div> 
        </div> 
       </div> 
       </div> 
       <br> 
       <br> 
       <br> 
       <br> 
       <input v-model="first_name" placeholder="First Name"> 
       <p>First Name is: {{ first_name }}</p> 
       <input v-model="last_name" placeholder="Last Name"> 
       <p>Last Name is: {{ last_name }}</p> 
       <input v-model="phone_number" placeholder="Phone Number"> 
       <p>Phone Number is: {{ phone_number }}</p> 
       <input v-model="email" placeholder="Email"> 
       <p>Email is: {{ email }}</p> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    import axios from 'axios'; 
    export default { 
     mounted() { 
      console.log('Component ready.'); 

      console.log(JSON.parse(this.a)); 
      console.log(JSON.parse(this.b)); 

      this.appliances = JSON.parse(this.a); 
      this.brands = JSON.parse(this.b); 

     }, 

     props: ['a','b'], 

     data: function() { 
      return { 
       appliances: '', 
       appliance: '', 
       brands: '', 
       brand: '', 
       age: '', 
       first_name: '', 
       last_name: '', 
       phone_number: '', 
       email: '', 
       questions: '', 
       answers: '', 
       result: '', 
       grouped_answers:'', 
       customer_answers: [], 
      } 
     }, 
     methods: { 
     incrementItem: function(item) {return item + 1}, 

     getQuestions: function(){ 
      console.log(this.appliance); 
      var self = this; 
      axios.get('/get_questions/' + this.appliance, { 

      }) 
      .then(function(response) { 
       console.log(response.data); 
       self.questions = response.data; 
       self.getAnswers(); 
      }) 
      .catch(function(error) { 
       console.log(error); 
      }); 
     }, 
     getAnswers: function(){ 
      console.log(this.appliance); 
      var self = this; 
      axios.get('/get_answers/' + this.appliance, { 

       }) 
       .then(function(response) { 
        console.log(response.data); 
        self.answers = response.data; 
        self.putAnswers(); 
       }) 
       .catch(function(error) { 
        console.log(error); 
       }); 
     }, 
     putAnswers: function(){ 
      var result = {}; 

      for (var i = 0; i < this.answers.answers.length; i++) { 
      var question_id = this.answers.answers[i].question_id; 
      console.log(question_id); 
      if(!result[question_id]) { 
       result[question_id] = {question_id: question_id, answers: []}; 
       } 
       result[question_id].answers.push({ 
       id: this.answers.answers[i].id, 
       question_id: question_id, 
       answer: this.answers.answers[i].answer}) 
      } 
      result = Object.keys(result).map(function (key) { return result[key]; }); 
      console.log(result); 

      this.grouped_answers = result; 

      console.log(this.grouped_answers[0].answers); 

     }, 
     }, 
    } 
</script> 

UPDATE

nextQuestion: function(){ 
    this.holding_answers = []; 
    }, 

    saveAnswer (question, groupedAnswerItem, value, type, event) { 
    console.log(value); 
    console.log(type); 

    if(type === "radio"){ 
     this.holding_answers = []; 
     this.holding_answers.push(value); 
    }; 

    if(type === "checkbox"){ 

     this.holding_answers.push(value); 
    }; 
    }, 



     <div v-for="(question, item) in questions.questions"> 
     {{question.question}} 
     <div v-bind:id="item"> 
     <div v-if="grouped_answers"> 
      <div v-for="a in grouped_answers[item].answers"> 
      <label>{{a.answer}} 
      <input @change="saveAnswer(question, grouped_answers[item], a.id, question.type)" :type="question.type" :value="a.id" :name="a.question_id"> 
      </div> 
     </div> 
     </div> 
     <button @click="nextQuestion()">Next</button> 
     </div> 

Answer 1

Ich benutze einfach on:change="findAnswers" und dann eine Javascript-Ereignis

methods: { 
    findAnswers: function(e) { 
     console.log(e.target.value); 
    }, 
} 

Bevor Sie zu einem Datenfeld wechseln. erste

Answer 2

Ein paar Anmerkungen:

• Sie können die v-if für Checkbox oder Radio entfernen und einen dynamischen Typ verwenden wie, :type="question.type"
• Versuchen Sie, die Ausgangsdaten als mögliche reale Typ einzustellen, wie grouped_answers sollte kein Array statt String sein?

Ok, also wenn ich richtig verstehe, möchten Sie die richtige Antwort in der richtigen Frage speichern? Sie sollten in Erwägung ziehen, das '@change' oder '@click' mit einer Funktion zu verwenden, die die Daten erhält, die Sie als Parameter benötigen.

Zum Beispiel:

<input @change="saveAnswer(question, grouped_answers[item], a.id)" :type="question.type" :value="a.id"> 

saveAnswer:

saveAnswer (question, groupedAnswerItem, value, event) {...} 

Das ist eine allgemeine Idee, nicht die Implementierung ist der Punkt, dass Sie die Daten dynamisch als Parameter und Änderung passieren können, wie Sie möchten. Normalerweise ist dies der Weg zu gehen, geben Sie alle notwendigen Informationen in Ihrer Funktion, um die Änderung mit diesen Daten zu erreichen. Innerhalb der Funktion haben Sie Zugriff auf Ihre Daten, die Ihnen die Arbeit erleichtern sollen.