首先，我對vue很陌生。我剛剛在速成課程中學到了它，并在幾個小時內用谷歌搜索了它。如果這很明顯，請原諒我。
我來自 vue cli 的代碼：https ://github.com/Cerezze/testSnowJoe/tree/main/vue-project
所以我有一個問題，我必須制作一個包含所有單選按鈕組的陣列。該陣列應該由單選按鈕組的索引填充，并且應該表示它們是否被更改（無論它們是否被選中）。他們每組只能選擇一個，這是一個測驗。
我遇到的問題是，即使我覺得我使用了正確的邏輯，陣列從 [0,0,0,0,0] 開始，對于每一組單選按鈕。這意味著我只能生成一個帶有一組或另一組按鈕映射的陣列。下面我將遍歷代碼并進一步解釋。
應用程式.vue
這是一個簡單的組件，我只匯入一個 json 檔案。它是一個物件陣列，每個物件包含：一個 ID、問題、答案和一個選項陣列（用于單選按鈕）。我將整個陣列作為道具發送到面板。
<template>
HELLO
<Panels :questions="questions"/>
</template>
<script>
import Panels from './components/Panels.vue';
import data from './questions.json';
export default{
data(){
return{
questions: data
}
},
components: {
Panels
}
}
</script>
<style>
</style>
面板.vue
該組件遍歷 json 檔案中的物件陣列，并為 json 檔案中的每個索引創建一個 Panel。我將問題和 questionsArray 發送到 Panel。
<template>
<div v-for="question in questions">
<Panel :question="question" :questionsArray="questions"/>
</div>
</template>
<script>
import Panel from './Panel.vue'
export default{
name: 'Panels',
props: {
questions: Array
},
components: {
Panel
}
}
</script>
<style scope>
</style>
面板.vue
該組件僅提供面板布局并將choices陣列和json陣列傳遞給question。
<template>
<div class = "Panel">
<div>
<p>{{question.question}}</p>
<Question :choices = "question.choices" :questionsArray = "questionsArray"/>
</div>
</div>
</template>
<script>
import Question from './Question.vue';
export default{
name: 'Panel',
props: {
question: Object,
questionsArray: Array
},
components: {
Question
}
}
</script>
<style scope>
</style>
問題.vue
這就是我的麻煩所在。正如我上面解釋的，我試圖收集一個陣列來表示每組問題點擊的內容。我希望它是一對一的陣列，因為我想檢查是否單擊了單選按鈕。
當我嘗試通過簡單地推送到陣列進行測驗時，對于每個組它都會正確推送內容，然后當我轉到另一組單選按鈕時，陣列將再次從初始化開始并繼續推送。
<template>
<div v-for="choice in choices">
<input type="radio" :id = "choice" @change="onChange($event)" v-model="mChoice" :name = "choices" :value = "choice">
<label :for = "choice">{{choice}}</label><br>
</div>
<p>{{mChoice}}</p>
</template>
<script>
import { VueElement } from 'vue';
export default{
name: 'Question',
data(){
return{
mChoice: null,
arr: [0,0,0,0,0]
}
},
methods: {
onChange(e){
var data = e.target.value;
let val = {
idx: 0,
correctAns: ""
};
let arr2 = [...this.arr];
this.questionsArray.forEach((i, index) => {
if(e.target.name == i.choices){
val.idx = index;
val.correctAns = i.correctAnswer;
arr2.splice(index, 1, val);
this.arr = [...arr2];
}
});
console.log( this.arr);
}
},
props: {
choices: Array,
questionsArray: Array
}
}
</script>
<style scope>
</style>
uj5u.com熱心網友回復：
觀察：
e.target.name將回傳以逗號分隔的選項字串，i.choices并將回傳選項陣列。因此，以下條件將始終回傳 false。this.questionsArray.forEach((i, index) => { if(e.target.name == i.choices) { // Will always return false. } }您必須
join(',')選擇陣列才能進行比較。另一個問題是，對于每個組件，當我們在動態渲染
arr: [0,0,0,0,0]的每個組件中初始化它時，它們都是分開的。Question因此，它arr為每個Question組件單獨更新。此問題的一種解決方法是將
val物件發送到父級，然后在父級中處理該更新邏輯，然后splice在父級中執行。
這是現場演示：
Vue.component('question', {
data: function() {
return {
mChoice: null
}
},
props: ['choices', 'questionsarray'],
template: `<div><div v-for="choice in choices">
<input type="radio" :id="choice" @change="onChange($event)" v-model="mChoice" :name="choices" :value="choice">
<label :for="choice">{{ choice }}</label></div>
</div>`,
methods: {
onChange(e) {
const data = e.target.value;
const val = {
idx: 0,
correctAns: ""
};
this.questionsarray.forEach((i, index) => {
if(e.target.name == i.choices.join(',')) {
val.idx = index;
val.correctAns = i.correctAnswer;
this.$emit('radioselection', { val: val, index: index })
}
});
}
}
});
var app = new Vue({
el: '#app',
data: {
arr: [0, 0, 0, 0, 0],
questions: [
{
"id": 1,
"question": "1. What is Chris's favorite shadow puppet?",
"choices": [
"Dog",
"Rabbit",
"Bird"
],
"correctAnswer": "Bird"
},
{
"id": 2,
"question": "2. What is Chris's favorite pokemon?",
"choices": [
"Poliwhirl",
"Pikachu",
"Suicune",
"Buzz Lightyear"
],
"correctAnswer": "Poliwhirl"
},
{
"id": 3,
"question": "3. What is Chris's least favorite dance?",
"choices": [
"Chicken Dance",
"All"
],
"correctAnswer": "All"
},
{
"id": 3,
"question": "4. What is Chris's favorite color?",
"choices": [
"Rainbow",
"Black",
"Rock",
"MegaMan",
"Sprite"
],
"correctAnswer": "Black"
}
]
},
methods: {
getVal({val, index}) {
this.arr.splice(index, 1, val);
console.log(this.arr);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="question in questions">
<p>{{ question.question }}</p>
<Question :choices="question.choices" :questionsArray="questions" @radioselection="getVal"/>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/497841.html
標籤：javascript 数组 Vue.js