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

Question

我遍历一个数组并显示一个单选按钮列表。我正在尝试禁用所有其他无线电输入，但单击后选择的无线电输入除外。我所能做的就是禁用所有收音机或被点击的收音机。

我能够在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>

Answer 1

你可以这样做，

检查输入是否被点击，或者如果在这种情况下没有点击，则将 disabled 设置为 false。

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

Js

disableAnswer : function(answer){

 if(this.answerVal=="" ||this.answerVal==answer.answerName) {
       return false;
    } else {
       return true;
     }

}

添加片段：

function callMe(){
    var vm = new Vue({
        el : '#root',
        data : {
        answerVal:"",
        answers:[
      {
        "answerID": "1",
        "answerName": "Blueberries"
      },
      {
        "answerID": "2",
        "answerName": "Apples"
      },
      {
        "answerID": "3",
        "answerName": "Bananas"
      },
      {
        "answerID": "4",
        "answerName": "Pineapple"
      },
      {
        "answerID": "5",
        "answerName": "Strawberries"
      }
  ]

        
        },
        methods: {
           disableAnswer(item){
            if(this.answerVal=="" ||this.answerVal==item) {
             return false;
           } else {
             return true;
           }

        }
  
        }
        
    })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
<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(answer.answerName)"
       />
 

</div>

Answer 2

disableAnswer(answers, index) 在渲染时只评估一次。最初，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
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      // Class definer for is checked or not
      isChecked: undefined,
      // Answer Data Properties
      answerVal: '',
      checkedAnswerID: '',
      checkedAnswerElem: '',
      "answers":[
        {
          "answerID": "1",
          "answerName": "Blueberries"
        },
        {
          "answerID": "2",
          "answerName": "Apples"
        },
        {
          "answerID": "3",
          "answerName": "Bananas"
        },
        {
          "answerID": "4",
          "answerName": "Pineapple"
        },
        {
          "answerID": "5",
          "answerName": "Strawberries"
        }
      ]
    };
  },
  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, answerVal) {
      if (!answerVal) return;
      if (arr[i].answerName !== answerVal) {
        return true
      }
    }
  }
})

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input[disabled] {
  border: 1px solid #ccc;
}

.mg-checked {
  border: 6px solid black;
}

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <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, answerVal)"
        :class="{'mg-checked':answer.answerID == isChecked}"
        @click="
          isChecked = answer.answerID
          checkAnswer(answers, index, $event)" />
  
  {{answerVal}}
</div>

---

^{您可能还会发现对您的代码进行小的重构很有用：demo}