Javascript 如何将类绑定到已检查输入的父类？

我的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>

这是我的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.target.value==='call'）{
返回this.callIsSelected=true；
返回this.supportIsSelected=false；
返回此项。paymentIsSelected=false；
返回this.paymentSelected=true；
这个.navigateToService（）；
}
如果（event.target.value==='support'）{
返回this.supportIsSelected=true；
返回this.callIsSelected=false；
返回此项。paymentIsSelected=false；
返回this.paymentSelected=true；
这个.navigateToService（）；
},
如果（event.target.value===‘付款’）{
返回此值。paymentIsSelected=true；
返回this.supportIsSelected=flase；
返回this.callIsSelected=false；
返回this.paymentSelected=true；
这个.navigateToService（）；
}
}

您不应该将

return

放在那里，如果第一次返回后的所有代码都没有执行，请将

onChange

方法更改为：

onChange（事件）{
如果（event.target.value==“调用”）{
this.callIsSelected=true；
this.supportisselect=false；
this.paymentIsSelected=false；
this.paymentSelected=true；
这个.navigateToService（）；
}
如果（event.target.value==“支持”）{
this.supportisselect=true；
this.callIsSelected=false；
this.paymentIsSelected=false；
this.paymentSelected=true；
这个.navigateToService（）；
}
如果（event.target.value==“付款”）{
this.paymentIsSelected=true；
this.supportisselect=false；
this.callIsSelected=false；
this.paymentSelected=true；
这个.navigateToService（）；
}
}

---

演示：

非常感谢，我已经编程了很短时间，但我没有意识到我不能再返回多个值了！

.callIsActive {
    background-color: #D53865;
}

.callIsActive p {
    color: #ffff;
}

.supportIsActive {
    background-color: #D53865;
}

.supportIsActive p {
    color: #ffff;
}

.paymentIsActive {
    background-color: #D53865;
}

.paymentIsActive p {
    color: #ffff;
}