javascript - 如何从 Vue.js 中的对象中删除两个元素？
问题描述
我有这个测验应用程序。
我有一个问题，每个有 4 个答案，有 10 个问题，每次随机显示。
我有一个按钮，当它被触发时，它应该删除显示的 4 个答案中的 2 个，始终保持正确答案。
所以我需要从一个对象中删除两个元素，因为我的问题数组由以下十个对象组成：
{
domanda: "Quando è iniziata la prima guerra mondiale?",
risposte: { a: "1993", b: "1910", c: "1915", d: "1879" },
rispostaCorretta: "c",
},
因此，考虑到这个问题，当我单击该按钮时，它应该删除 2 个答案（a、b 或 d）并让 c 答案始终正确，因为它是正确的答案。
这是应该完成这项工作的功能：
getHalf(obj) {
console.log(obj)
for(var k in obj.risposte) {
console.log(k)
if(k != obj.rispostaCorretta) {
this.$delete(k, obj.risposte)
}
}
}
目前它给了我这些错误：
Cannot delete reactive property on undefined, null, or primitive value: a
Cannot delete reactive property on undefined, null, or primitive value: b
Cannot delete reactive property on undefined, null, or primitive value: c
这是当前对象：
{
domanda: "Chi era il frontman dei Queen?",
risposte: {
a: "Zlatan",
b: "Er Freddo",
c: "Otello Lupacchini",
d: "Freddy Mercury",
},
rispostaCorretta: "d",
},
d 是正确的答案，所以至少这是有效的，现在它应该是其他的 2 个而不是 3 个。
这是按钮，我每次都在传递当前问题
<button @click="getHalf(domande[domandaCorrente])">50/50</button>
我尝试了Vue.delete(...)orthis.$delete('a', obj)但它没有用，它大多数时候都给我这个错误：无法删除未定义、空值或原始值的反应性属性：a
我该如何解决这个问题？如果可以请帮助我。
我把整个 Vue 模板留在这里
<template>
<div class="question">
<div class="q" v-if="domandaCorrente < domande.length && !finish">
<h2 class="border">{{ domande[domandaCorrente].domanda }}</h2>
<!-- <Answer @selectAnswer="setAnswer" :domande="domande" /> -->
<div class="answer">
<label
class="answer-label border hide"
:for="index"
v-for="(risposta, index) in domande[domandaCorrente].risposte"
:key="index"
:class="{
hover: domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta &&
domandaScelta != '',
}"
>
<input
type="radio"
:checked="index == selected"
:name="index"
:id="index"
class="hidden"
:value="index"
@change="select($event)"
/>
<h4 class="index">{{ index }}</h4>
<h4 class="actual-answer">{{ risposta }}</h4>
</label>
<button @click="getHalf(domande[domandaCorrente])">50/50</button>
<div
v-show="
domandaScelta != '' &&
domandaCorrente < domande.length - 1 &&
!finish
"
class="button"
>
<button v-show="!endGame" @click="nextQuestion()">
Vai alla domanda da {{ nextPrice | toCurrency }} €
</button>
<h4 class="wrong" v-show="endGame">Hai Sbagliato!</h4>
</div>
<div
v-show="
domandaScelta != '' &&
domandaCorrente == domande.length - 1 &&
!finish
"
class="button"
>
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
<div v-else-if="finish || domandaCorrente == domande.length">
<div class="end">
<!-- <h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2> -->
<h2 v-show="domandaCorrente != domande.length">Ti sei fermato alla domanda {{ domandaCorrente + 1 }}</h2>
<h2 v-show="domandaCorrente == domande.length" >Complimenti! Hai completato la scalata!</h2>
<h5 style="margin: 30px 0">Torni a casa con</h5>
<h2 style="color: gold; font-size: 3rem">
{{ finalPrice | toCurrency }} €
</h2>
<button class="reload" @click="reloadQuiz()">
Inizia di nuovo la scalata!
</button>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
export default {
name: "Question",
data() {
return {
// random: 0,
half: false,
domandaCorrente: 0,
correct: 0,
nextPrice: 0,
wrong: 0,
endGame: false,
domandaScelta: "",
selected: false,
finish: false,
gift: [1000, 2000, 3000, 5000, 10000, 15000, 25000, 40000, 50000, 100000],
finalPrice: 0,
domande: [
{
domanda: "Quante champions ha vinto il Milan?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "c",
},
{
domanda: "La capitale della Romania?",
risposte: { a: "Bucarest", b: "Milano", c: "Berlino", d: "Oslo" },
rispostaCorretta: "a",
},
{
domanda: "Chi ha scoperto l'America?",
risposte: {
a: "Cristoforo Colombo",
b: "Carlo Pellegatti",
c: "216",
d: "Amerigo Vespucci",
},
rispostaCorretta: "a",
},
{
domanda: "Quando è iniziata la prima guerra mondiale?",
risposte: { a: "1993", b: "1910", c: "1915", d: "1879" },
rispostaCorretta: "c",
},
{
domanda: "Chi era il frontman dei Queen?",
risposte: {
a: "Zlatan",
b: "Er Freddo",
c: "Otello Lupacchini",
d: "Freddy Mercury",
},
rispostaCorretta: "d",
},
{
domanda: "A quale temperatura bolle l'acqua?",
risposte: { a: "10°", b: "5°", c: "70°", d: "100°" },
rispostaCorretta: "d",
},
{
domanda: "Chi ha vinto gli europei nel 2021",
risposte: { a: "Spagna", b: "Germania", c: "Italia", d: "Danimarca" },
rispostaCorretta: "c",
},
{
domanda: "Quale di queste è una funzione?",
risposte: {
a: "let item = 23",
b: "function getItem() ...",
c: "return",
d: "string.join()",
},
rispostaCorretta: "b",
},
{
domanda: "Come si passano dati ad un componente figlio in Vue?",
risposte: { a: "Props", b: "Emit", c: "Componenti", d: "Altro" },
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
this.selected = e.target.value;
this.domandaScelta = e.target.value;
// console.log(this.domandaScelta);
// console.log(this.domandaCorrente);
if (
this.domandaScelta ==
this.domande[this.domandaCorrente].rispostaCorretta
) {
this.correct++;
this.finalPrice = this.gift[this.domandaCorrente];
this.nextPrice = this.gift[this.domandaCorrente + 1];
this.finish = false;
} else {
// this.reload();
this.endGame = true;
setTimeout(() => {
this.finish = true;
}, 1500);
// this.wrong++
}
},
shuffleVueArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
Vue.set(array, i, array[j]);
Vue.set(array, j, temp);
}
},
nextQuestion() {
this.domandaScelta = "";
this.selected = false;
this.domandaCorrente++;
},
showResult() {
this.domandaCorrente++;
},
reloadQuiz() {
location.reload();
},
toCurrency() {
Vue.filter("toCurrency", function (value) {
if (typeof value !== "number") {
return value;
}
var formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 0,
});
return formatter.format(value);
});
},
getHalf(obj) {
console.log(obj)
for(var k in obj.risposte) {
console.log(k)
if(k != obj.rispostaCorretta) {
this.$delete(k, obj.risposte)
}
}
}
},
created() {
this.shuffleVueArray(this.domande);
this.toCurrency();
},
};
</script>
解决方案
尝试以这种方式删除 2 个答案：
getHalf(obj) {
let nr = 0
const removeProperty = (propKey, { [propKey]: propValue, ...rest }) => rest;
for(var k in obj.risposte) {
if (nr < 2) {
if(k != obj.rispostaCorretta) {
obj.risposte = removeProperty(k, obj.risposte);
nr++
}
} else return
}
},
new Vue({
el: '#demo',
name: "Question",
data() {
return {
// random: 0,
half: false,
domandaCorrente: 0,
correct: 0,
nextPrice: 0,
wrong: 0,
endGame: false,
domandaScelta: "",
selected: false,
finish: false,
gift: [1000, 2000, 3000, 5000, 10000, 15000, 25000, 40000, 50000, 100000],
finalPrice: 0,
domande: [
{
domanda: "Quante champions ha vinto il Milan?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "c",
},
{
domanda: "La capitale della Romania?",
risposte: { a: "Bucarest", b: "Milano", c: "Berlino", d: "Oslo" },
rispostaCorretta: "a",
},
{
domanda: "Chi ha scoperto l'America?",
risposte: {
a: "Cristoforo Colombo",
b: "Carlo Pellegatti",
c: "216",
d: "Amerigo Vespucci",
},
rispostaCorretta: "a",
},
{
domanda: "Quando è iniziata la prima guerra mondiale?",
risposte: { a: "1993", b: "1910", c: "1915", d: "1879" },
rispostaCorretta: "c",
},
{
domanda: "Chi era il frontman dei Queen?",
risposte: {
a: "Zlatan",
b: "Er Freddo",
c: "Otello Lupacchini",
d: "Freddy Mercury",
},
rispostaCorretta: "d",
},
{
domanda: "A quale temperatura bolle l'acqua?",
risposte: { a: "10°", b: "5°", c: "70°", d: "100°" },
rispostaCorretta: "d",
},
{
domanda: "Chi ha vinto gli europei nel 2021",
risposte: { a: "Spagna", b: "Germania", c: "Italia", d: "Danimarca" },
rispostaCorretta: "c",
},
{
domanda: "Quale di queste è una funzione?",
risposte: {
a: "let item = 23",
b: "function getItem() ...",
c: "return",
d: "string.join()",
},
rispostaCorretta: "b",
},
{
domanda: "Come si passano dati ad un componente figlio in Vue?",
risposte: { a: "Props", b: "Emit", c: "Componenti", d: "Altro" },
rispostaCorretta: "a",
},
{
domanda: "Quante champions ha vinto la Juve?",
risposte: { a: "2", b: "5", c: "7", d: "10" },
rispostaCorretta: "a",
},
],
};
},
methods: {
select(e) {
this.selected = e.target.value;
this.domandaScelta = e.target.value;
// console.log(this.domandaScelta);
// console.log(this.domandaCorrente);
if (
this.domandaScelta ==
this.domande[this.domandaCorrente].rispostaCorretta
) {
this.correct++;
this.finalPrice = this.gift[this.domandaCorrente];
this.nextPrice = this.gift[this.domandaCorrente + 1];
this.finish = false;
} else {
// this.reload();
this.endGame = true;
setTimeout(() => {
this.finish = true;
}, 1500);
// this.wrong++
}
},
shuffleVueArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = array[i];
Vue.set(array, i, array[j]);
Vue.set(array, j, temp);
}
},
nextQuestion() {
this.domandaScelta = "";
this.selected = false;
this.domandaCorrente++;
},
showResult() {
this.domandaCorrente++;
},
reloadQuiz() {
location.reload();
},
toCurrency() {
Vue.filter("toCurrency", function (value) {
if (typeof value !== "number") {
return value;
}
var formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
minimumFractionDigits: 0,
});
return formatter.format(value);
});
},
getHalf(obj) {
let nr = 0
const removeProperty = (propKey, { [propKey]: propValue, ...rest }) => rest;
for(var k in obj.risposte) {
if (nr < 2) {
if(k != obj.rispostaCorretta) {
obj.risposte = removeProperty(k, obj.risposte);
nr++
}
} else return
}
},
},
created() {
this.shuffleVueArray(this.domande);
this.toCurrency();
},
});
Vue.config.productionTip = false
Vue.config.devtools = false.answer {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="question">
<div class="q" v-if="domandaCorrente < domande.length && !finish">
<h2 class="border">{{ domande[domandaCorrente].domanda }}</h2>
<!-- <Answer @selectAnswer="setAnswer" :domande="domande" /> -->
<div class="answer">
<label
class="answer-label border hide"
:for="index"
v-for="(risposta, index) in domande[domandaCorrente].risposte"
:key="index"
:class="{
hover: domandaScelta == '',
'bg-red': domandaScelta == index,
'bg-green':
index == domande[domandaCorrente].rispostaCorretta &&
domandaScelta != '',
}"
>
<input
type="radio"
:checked="index == selected"
:name="index"
:id="index"
class="hidden"
:value="index"
@change="select($event)"
/>
<h4 class="index">{{ index }}</h4>
<h4 class="actual-answer">{{ risposta }}</h4>
</label>
<button @click="getHalf(domande[domandaCorrente])">50/50</button>
<div
v-show="
domandaScelta != '' &&
domandaCorrente < domande.length - 1 &&
!finish
"
class="button"
>
<button v-show="!endGame" @click="nextQuestion()">
Vai alla domanda da {{ nextPrice | toCurrency }} €
</button>
<h4 class="wrong" v-show="endGame">Hai Sbagliato!</h4>
</div>
<div
v-show="
domandaScelta != '' &&
domandaCorrente == domande.length - 1 &&
!finish
"
class="button"
>
<button @click="showResult()">Finish</button>
</div>
</div>
</div>
<div v-else-if="finish || domandaCorrente == domande.length">
<div class="end">
<!-- <h2>
Correct Answers: <span class="t-green">{{ correct }}</span>
</h2> -->
<h2 v-show="domandaCorrente != domande.length">Ti sei fermato alla domanda {{ domandaCorrente + 1 }}</h2>
<h2 v-show="domandaCorrente == domande.length" >Complimenti! Hai completato la scalata!</h2>
<h5 style="margin: 30px 0">Torni a casa con</h5>
<h2 style="color: gold; font-size: 3rem">
{{ finalPrice | toCurrency }} €
</h2>
<button class="reload" @click="reloadQuiz()">
Inizia di nuovo la scalata!
</button>
</div>
</div>
</div>
</div>推荐阅读
- javascript - 在网站的不同 div 上滚动时使 Bootstrap4 导航栏改变颜色
- python - 按日期过滤日期时间索引
- python - 如何在 Python 和 C++ 之间持久化一个对象？
- python-3.x - 从用户输入中过滤一个数字并在程序中使用它
- reactjs - 请求参数更改时如何发送最后一个去抖动的请求？
- c# - 无法加载文件或程序集'Oracle.ManagedDataAccess，版本 = 2.0.19.1 (.Net 5)
- javascript - 从字符串化文件中读取节点 Orchestrator 对象并再次使用其功能
- javascript - 使用 composition-api 在 vuejs 中更新组件属性的问题
- php - Node.js AES-256-CBC 加密问题
- r - R中的rbind命令在一个相同的数据集中