如何将一个类绑定到选中的输入的父项？

如何解决如何将一个类绑定到选中的输入的父项？

我的html中有三个可选输入选项。在选择它们时和父悬停时，我将对它们应用一个类。 我想在悬停事件中保持父样式与选择输入时的样式相同，但是根据我在其他帖子中看到的内容，无法将类应用于所检查输入的父类。 我正在尝试使用js根据所选输入将一个类应用于每个父级，但是我设法在第一次单击时将其应用，但是一旦选择另一个选项，上一个父级的父级就不会被停用。 这是我的html

        <div class="resume-icons">
            <div class="resume-column" v-bind:class="{ paymentIsActive: paymentIsSelected }">
              <label>
                  <input type="radio" name="selectedResume" value="payment" v-model="selectedResume" checked @change="onChange($event)">
                  <i class="icon-credit-card"></i>
              </label>
              <p class="resume-subtitle">Validated</p>                
            </div>
            <div class="resume-column" v-bind:class="{ supportIsActive: supportIsSelected }">
              <label>
                <input type="radio" name="selectedResume" value="support" v-model="selectedResume" checked @change="onChange($event)">
                <i class="icon-support"></i>
              </label>
              <p class="resume-subtitle">Support</p>                
            </div>
            <div class="resume-column" id="call" v-bind:class="{ callIsActive: callIsSelected }">
              <label>
                <input type="radio" name="selectedResume" value="call" v-model="selectedResume" checked @change="onChange($event)">
                <i class="icon-phone-3"></i>
              </label>
              <p class="resume-subtitle">Call</p>               
            </div>
        </div>

这是亩剧本

    export default {
        data () {
            return {
                
                selectedResume: null,paymentSelected: false,callIsSelected: false,supportIsSelected: false,paymentIsSelected: false,}
        },methods: {
          submitted() {
              this.isSubmitted = true;
          },navigateToService(){
            this.$store.dispatch('setStep',this.step + 1)
            this.$router.push('/devis/service')
          },onChange(event) {
              if (event.target.value === 'call') {
                  return this.callIsSelected = true;
                  return this.supportIsSelected = false;
                  return this.paymentIsSelected = false;
                  return this.paymentSelected = true;
                  this.navigateToService();
              }
              if (event.target.value === 'support') {
                  
                  return this.supportIsSelected = true;
                  return this.callIsSelected = false;
                  return this.paymentIsSelected = false;
                  return this.paymentSelected = true;
                  this.navigateToService();
              },if (event.target.value === 'payment') {
                  return this.paymentIsSelected = true;
                  return this.supportIsSelected = flase;
                  return this.callIsSelected = false;
                  return this.paymentSelected = true;
                  this.navigateToService();
              }

          }
        },computed: {
            
        },components: {

        }
    }

还有我的CSS

.callIsActive {
    background-color: #D53865;
}

.callIsActive p {
    color: #ffff;
}

.supportIsActive {
    background-color: #D53865;
}

.supportIsActive p {
    color: #ffff;
}

.paymentIsActive {
    background-color: #D53865;
}

.paymentIsActive p {
    color: #ffff;
}

我不明白为什么当您在'onChange'方法中输入另一个if语句时却不停用先前的类。 我究竟做错了什么？ 预先感谢您的时间和帮助

解决方法

 onChange(event) {
              if (event.target.value === 'call') {
                  return this.callIsSelected = true;
                  return this.supportIsSelected = false;
                  return this.paymentIsSelected = false;
                  return this.paymentSelected = true;
                  this.navigateToService();
              }
              if (event.target.value === 'support') {
                  
                  return this.supportIsSelected = true;
                  return this.callIsSelected = false;
                  return this.paymentIsSelected = false;
                  return this.paymentSelected = true;
                  this.navigateToService();
              },if (event.target.value === 'payment') {
                  return this.paymentIsSelected = true;
                  return this.supportIsSelected = flase;
                  return this.callIsSelected = false;
                  return this.paymentSelected = true;
                  this.navigateToService();
              }

          }

您不应该将return放在此处，这会使第一次返回后的所有代码都没有执行，请将onChange方法更改为：

onChange(event) {
      if (event.target.value === "call") {
        this.callIsSelected = true;
        this.supportIsSelected = false;
        this.paymentIsSelected = false;
        this.paymentSelected = true;
        this.navigateToService();
      }
      if (event.target.value === "support") {
        this.supportIsSelected = true;
        this.callIsSelected = false;
        this.paymentIsSelected = false;
        this.paymentSelected = true;
        this.navigateToService();
      }
      if (event.target.value === "payment") {
        this.paymentIsSelected = true;
        this.supportIsSelected = false;
        this.callIsSelected = false;
        this.paymentSelected = true;
        this.navigateToService();
      }
    }

演示：https://codesandbox.io/s/sweet-heisenberg-dt701?file=/src/App.vue