将动态创建的输入推送到数组的最佳过程是什么？理想情况下，我想在数据中使用数组。
customer_answers: [1,4,5,6,8]
数组中的项目是答案的值。我知道每个答案都需要推送，并且可能使用on:change来运行一个方法。
但是，如何确定问题和答案的每个问题和动态？
问题代码如下：
<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>
如果有帮助的完整代码如下：
<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>
更新
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>
答案 0 :(得分：0)
我只使用on:change="findAnswers"然后使用Javascript事件
methods: {
findAnswers: function(e) {
console.log(e.target.value);
},
}
在推送到数据阵列之前。
答案 1 :(得分：0)
首先注意几点：
v-if复选框或广播，并使用动态类型，例如:type="question.type" grouped_answers不应该是数组而不是字符串？好的，如果我理解正确，你想在正确的问题中保存正确的答案吗？你应该考虑使用'@change'或'@click'和一个函数来获取你需要的数据作为参数。
例如：
<input @change="saveAnswer(question, grouped_answers[item], a.id)" :type="question.type" :value="a.id">
saveAnswer：
saveAnswer (question, groupedAnswerItem, value, event) {...}
这是一个总体思路，而不是实现，重点是您可以将动态数据作为参数传递并根据需要进行更改。通常这是要走的路，传递函数中所需的所有信息，以实现对该数据的更改。在函数内部，您可以访问数据，这可以使事情变得更容易。