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

Question

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

这里是 mu 脚本

    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 语句时，您不会停用以前的类。 我究竟做错了什么？ 提前感谢您的时间和帮助

Answer 1

 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