Vuejs2 检测Vue中未选中的无线电输入（通过单击其他无线电输入）

当选择无线电输入时，我想给我的标签加一个边框，但我只能在激活无线电输入时检测。我知道在CSS中使用一些技巧可以做到这一点，但我想通过Javascript来实现

<fieldset>
  <label>
    <input type="radio" name="test" @change="someMethod">
    test
  </label>
  <label>
    <input type="radio" name="test" @change="someMethod">
    test
  </label>
</fieldset>

methods: {
  someMethod () {
    console.log('something')
  }
}

测试
测试
方法：{
方法（）{
console.log（'something'）
}
}

当输入状态在选中和未选中之间变化时，我希望调用

someMethod

方法，但这种变化仅在单击输入（选中）时调用

---

使用$refs检查所有无线电输入，并使用数组存储以前的状态，然后我们可以设法执行以下操作：

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        previous_refs:[],
        
    },
    methods:{
        someMethod(){
        for(const key in this.$refs){
            if(this.previous_refs[key]!==undefined && 
            this.previous_refs[key].checked===true && 
            this.$refs[key].checked===false){
                console.log(this.$refs[key].id+' un-checked, do something');
            }
            if(this.$refs[key].checked===true){
                console.log(this.$refs[key].id+' checked, do something');
            }
            if(this.previous_refs[key]===undefined){
                this.previous_refs[key]={checked:this.$refs[key].checked};
            }
            else{
                this.previous_refs[key].checked=this.$refs[key].checked;
            } 
        }
        
        },
    }
})

---

请检查以查看详细信息。

使用$refs检查所有无线电输入，并使用阵列存储以前的状态，然后我们可以设法执行以下操作：

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
        previous_refs:[],
        
    },
    methods:{
        someMethod(){
        for(const key in this.$refs){
            if(this.previous_refs[key]!==undefined && 
            this.previous_refs[key].checked===true && 
            this.$refs[key].checked===false){
                console.log(this.$refs[key].id+' un-checked, do something');
            }
            if(this.$refs[key].checked===true){
                console.log(this.$refs[key].id+' checked, do something');
            }
            if(this.previous_refs[key]===undefined){
                this.previous_refs[key]={checked:this.$refs[key].checked};
            }
            else{
                this.previous_refs[key].checked=this.$refs[key].checked;
            } 
        }
        
        },
    }
})

---

请检查以查看详细信息。

通过CSS实现：

技巧是在选中的输入中添加一个before：

label {
  display: flex;
  position: relative;
  input:checked {
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid blue;
    }
  }
}

---

通过CSS成功地做到了这一点：

技巧是在选中的输入中添加一个before：

label {
  display: flex;
  position: relative;
  input:checked {
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid blue;
    }
  }
}

---

你说输入会改变是什么意思？这是一种无线电类型，你是指标签还是未检查的无线电？输入状态。检查或不检查。目前，该方法仅在状态更改为checked时调用。解决方案主要是用JQuery编写的，但您可能会在这里找到一些启示/帮助：您认为输入会更改是什么意思？这是一种无线电类型，你是指标签还是未检查的无线电？输入状态。检查或不检查。目前，该方法仅在状态更改为checked时调用。解决方案主要用JQuery编写，但您可能会在这里找到一些启示/帮助：Myea，我想在标签本身而不是父组件中执行。我确实通过css找到了答案：Myea，我想在标签本身而不是父组件中完成它。我确实通过css找到了答案，顺便说一下：