Vue.js测验App实现50/50功能：如何从对象中删除两个错误答案元素？

问题原因 #

1. this.$delete参数顺序错误：Vue提供的$delete方法第一个参数是要操作的目标对象，第二个参数是要删除的属性名，你原有代码把参数顺序写反了，传入的第一个参数是字符串类型的选项key，所以触发了「无法在原始值上删除响应式属性」的报错。
2. 逻辑不符合需求：原有循环会删除所有错误选项，和你需要只删除2个错误选项、保留1个错误+1个正确的要求不符。

解决方案 #

替换你的getHalf方法为以下代码即可：

getHalf(obj) {
  // 已触发过50/50的题目直接返回，避免重复操作
  if(Object.keys(obj.risposte).length <= 2) return
  // 收集所有错误选项的key
  const wrongKeys = Object.keys(obj.risposte).filter(key => key !== obj.rispostaCorretta)
  // 打乱错误选项顺序，随机取2个删除
  wrongKeys.sort(() => Math.random() - 0.5)
  const toDelete = wrongKeys.slice(0,2)
  // 按正确参数顺序调用$delete删除属性
  toDelete.forEach(key => {
    this.$delete(obj.risposte, key)
  })
}

如果需要避免用户重复点击按钮，也可以给50/50按钮增加禁用状态：

<button @click="getHalf(domande[domandaCorrente])" :disabled="Object.keys(domande[domandaCorrente].risposte).length <= 2">50/50</button>

修改完成后即可实现预期功能：点击按钮随机删除2个错误选项，始终保留正确答案和1个错误选项，无报错。

内容的提问来源于stack exchange，提问作者D.D.