javascript - 类绑定始终处于活动状态

Question

我有一个小问题，我根本无法弄清楚。active选择职业时，我正在尝试激活类。你能帮我找出我的错误吗？我的目标类是image-rect.

    <div
      v-for="(profession, index) in professions"
      :key="index"
    >
      <div
        class="profession-btn"
        :class="(selected === index) ? 'active' : ''"
        @click="toggleProfession(index, profession)"
      >
        <div class="wrapper">
          <div
            class="image-rect"
            :class="(selected === index) ? 'active' : ''"
          >
            <img :src="profession.icon">
          </div>
        </div>
        <div
          class="profession-name"
          :style="[selected === index ? { opacity: 1 } : { opacity: 0.3 }]"
        >
          {{ profession.name }}
        </div>
      </div>
   </div>

脚本

export default {
  props: {
    professions: {
      type: Array,
      default: () => []
    },
    selectedProfession: {
      type: Object,
      default: () => {}
    }
  },
  data: () => ({
    checked: false,
    selected: 0
  }),
  updated() {
    console.log('selectedProfession', this.selectedProfession)
    if (this.selectedProfession) {
      this.selected = this.professions.findIndex(profession => profession.name === this.selectedProfession.name)
    }
  },
  methods: {
    toggleProfession(index, profession) {
      this.checked = !this.checked
      this.selected = index
      const price = this.checked ? profession.price : 0
      const name = this.checked ? profession.name : ''
      this.$parent.getProfession(price, name)
    }
  }
}

CSS

.image-rect {
  width: 40px;
  height: 40px;
  background-color: white;
  padding: 0px;
  border-radius: 10px;
  margin: 0 auto;
}
.image-rect.active {
  background-color: #ef793c;
}

标签： javascriptcssvue.jsnuxt.js