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

pd.to_datetime(('00' + df.time.astype(str)).str[-4:], format='%H%M')在渲染时仅评估一次。最初，disableAnswer(answers, index)是answerVal，因为尚未选择任何答案，因此null返回disableAnswer，导致所有单选按钮立即被禁用。

一种快速解决方案是将true添加为函数参数（即answerVal），以便在disableAnswer(answers, index, answerVal)更改时重新评估该函数。我们还必须修改answerVal来忽略disableAnswer的{{1}}值，该值会在初始化时出现：

null

answerVal

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
      }
    }
  }
})

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

Answer 2

您可以这样做，

检查是否单击了输入或在这种情况下未单击输入，将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>

Vue，单击单选后禁用所有其他输入

2 个答案: