Vue.js Vue，单击收音机后禁用所有其他输入

我在数组上循环并显示单选按钮列表。我正在尝试禁用所有其他无线电输入，但单击后选择的输入除外。我所能管理的就是禁用所有收音机或单击的收音机

我能够在

v-for

循环中动态添加一个类，因此我尝试以相同的方式禁用输入，但所有内容都被禁用：

:disabled="{'disabled':answer.answerID == isChecked}"

我也尝试过使用一种方法，但也没有任何运气：

/*列表数据*/

"answers":[
      {
        "answerID": "1",
        "answerName": "Blueberries"
      },
      {
        "answerID": "2",
        "answerName": "Apples"
      },
      {
        "answerID": "3",
        "answerName": "Bananas"
      },
      {
        "answerID": "4",
        "answerName": "Pineapple"
      },
      {
        "answerID": "5",
        "answerName": "Strawberries"
      }
  ]

/*组件代码*/

<template>
    <input
        v-for="(answer, index) in answers"
        :key="index"
        type="radio"
        class="mg-input mg-answer"
        ref="mgAnswer"
        name="mg-answer"
        :value="answer.answerName"
        v-model="answerVal"
        :disabled="disableAnswer(answers, index)"
        :class="{'mg-checked':answer.answerID == isChecked}"
        @click="
          isChecked = answer.answerID
          checkAnswer(answers, index, $event)" />
</template>

<script>
export default {
  data: function () {
    return {
      // Class definer for is checked or not
      isChecked: undefined,
      // Answer Data Properties
      answerVal: '',
      checkedAnswerID: '',
      checkedAnswerElem: '',
    }
  },
  methods: {
    checkAnswer: function (arr, i, event) {
      let mgAnswer = this.$refs.mgAnswer
      this.checkedAnswerID = arr[i].answerID
      this.checkedAnswerElem = mgAnswer[i]

      if (mgAnswer[i].answerName !== this.answerVal) {
        this.answerVal = ''
      }
    },
    disableAnswer: function (arr, i) {
      if (arr[i].answerName !== this.answerVal) {
        return true
      }
    }
  }
}
</script>

导出默认值{
数据：函数（）{
返回{
//是否选中的类定义器
已检查：未定义，
//应答数据属性
回答：''，
checkedAnswerID:“”，
已检查答案：“”，
}
},
方法：{
检查答案：功能（arr、i、事件）{
设mgAnswer=this.$refs.mgAnswer
this.checkedAnswerID=arr[i]。answerID
this.checkedAnswerElem=mgAnswer[i]
if（mgAnswer[i].answerName！==this.answerVal）{
这是我的答案
}
},
disableAnswer：功能（arr，i）{
if（arr[i].answerName！==this.answerVal）{
返回真值
}
}
}
}

您可以这样做

检查是否单击了输入，如果未单击，则将禁用设置为false

<input :disabled="disableAnswer(answer)" />

添加的代码段：

函数callMe（）{
var vm=新的Vue({
el:'根'，
数据：{
答复：“，
答复:[
{
“answerID”：“1”，
“回答者姓名”：“蓝莓”
},
{
“回答”：“2”，
“应答器名称”：“苹果”
},
{
“回答”：“3”，
“应答器名称”：“香蕉”
},
{
“回答”：“4”，
“应答器名称”：“菠萝”
},
{
“回答”：“5”，
“回答者姓名”：“草莓”
}
]
},
方法：{
拒绝回答（项目）{
if（this.answerVal==“”| | this.answerVal==项）{
返回false；
}否则{
返回true；
}
}
}
})
}
callMe（）
您可以这样做

检查是否单击了输入，如果未单击，则将禁用设置为false

<input :disabled="disableAnswer(answer)" />

添加的代码段：


函数callMe（）{
var vm=新的Vue({
el:'根'，
数据：{
答复：“，
答复:[
{
“answerID”：“1”，
“回答者姓名”：“蓝莓”
},
{
“回答”：“2”，
“应答器名称”：“苹果”
},
{
“回答”：“3”，
“应答器名称”：“香蕉”
},
{
“回答”：“4”，
“应答器名称”：“菠萝”
},
{
“回答”：“5”，
“回答者姓名”：“草莓”
}
]
},
方法：{
拒绝回答（项目）{
if（this.answerVal==“”| | this.answerVal==项）{
返回false；
}否则{
返回true；
}
}
}
})
}
callMe（）

disableAnswer（答案、索引）
仅在呈现时评估一次。最初，
answerVal
为
null
，因为尚未选择答案，因此
disableAnswer
返回
true
，导致所有单选按钮立即被禁用

快速修复方法是添加
answerVal
作为函数参数（即
disableAnswer（answers，index，answerVal）
），以便在
answerVal
更改时重新评估函数。我们还必须修改
disableAnswer
以忽略
answerVal
的
null
值，这将在初始化时发生：

disableAnswer(arr, i, answerVal) {
  if (!answerVal) {
    // not yet set
    return;
  }

  if (arr[i].answerName !== answerVal) {
    return true
  }
}


newvue({
el:“#应用程序”，
数据（）{
返回{
//是否选中的类定义器
已检查：未定义，
//应答数据属性
回答：''，
checkedAnswerID:“”，
已检查答案：“”，
“答案”：[
{
“answerID”：“1”，
“回答者姓名”：“蓝莓”
},
{
“回答”：“2”，
“应答器名称”：“苹果”
},
{
“回答”：“3”，
“应答器名称”：“香蕉”
},
{
“回答”：“4”，
“应答器名称”：“菠萝”
},
{
“回答”：“5”，
“回答者姓名”：“草莓”
}
]
};
},
方法：{
检查答案：功能（arr、i、事件）{
设mgAnswer=this.$refs.mgAnswer
this.checkedAnswerID=arr[i]。answerID
this.checkedAnswerElem=mgAnswer[i]
if（mgAnswer[i].answerName！==this.answerVal）{
这是我的答案
}
},
disableAnswer：功能（arr、i、answerVal）{
如果（！answerVal）返回；
if（arr[i].answerName！==answerVal）{
返回真值
}
}
}
})
输入{
-webkit外观：无；
-moz外观：无；
外观：无；
边界半径：50%；
宽度：16px；
高度：16px；
边框：2个实心#999；
过渡：0.2s全线性；
大纲：无；
右边距：5px；
位置：相对位置；
顶部：4px；
}
输入[禁用]{
边框：1px实心#ccc；
}
.mg检查{
边框：6px纯黑；
}

{{answerVal}}
disableAnswer（答案、索引）
仅在呈现时评估一次。最初，
answerVal
为
null
，因为尚未选择答案，因此
disableAnswer
返回
true
，导致所有单选按钮立即被禁用

快速修复方法是添加
answerVal
作为函数参数（即
disableAnswer（answers，index，answerVal）
），以便在
answerVal
更改时重新评估函数。我们还必须修改
disableAnswer
以忽略的
null
值<