Vue.js实现点击按钮显示价格，默认激活数组首个元素

1. 初始化选中状态与数据跟踪 #

在组件的data中添加变量跟踪当前选中的学术等级ID，初始值设为第一个等级的ID，确保页面加载时第一个按钮默认激活：

data() {
  return {
    AcademicLevels: [
      { id:1, name: 'High School', price: 20, active: true },
      { id:2, name: 'Undergrad. (yrs 1‑2)', price: 30, active: false },
      { id:3, name: 'Undergrad. (yrs 3‑4)', price: 35, active: false },
      { id:4, name: 'Masters', price: 40, active: false },
      { id:5, name: 'PHD', price: 50, active: false }
    ],
    selectedAcademicId: 1 // 绑定初始选中项
  }
}

2. 修正按钮组交互逻辑 #

按钮不支持v-model指令，移除该绑定；同时修正激活类的判断逻辑，点击按钮直接更新选中ID：

<div class="rc-orderform__row">
   <div class="rc-orderform__feature-heading">Academic level</div>
   <div class="rc-orderform__feature-body">
      <div class="rc-validation-representer valid" data-invalid="false">
         <div class="rc-radios rc-radios--theme-default vertical-on-small" style="white-space: nowrap;">
            <div class="radio-button-wrapper radio-button-wrapper radio-button-wrapper--flexbuttons" 
                 v-for="academic in AcademicLevels" :key="academic.id">
               <button type="button" class="radio-button radio-button--n-1" tabindex="-1"
                  @click="selectedAcademicId = academic.id"
                  :class="selectedAcademicId === academic.id ? 'active' : ''"
                  :id="'workLevel_' + academic.id">
                  <div class="button-checkbox"></div>
                  <div class="radio-button__content">{{academic.name}}</div>
               </button>
            </div>
         </div>
      </div>
   </div>
</div>

3. 修复总成本计算逻辑 #

原计算属性错误地直接从数组取price，需先找到当前选中的学术等级对象，再获取对应价格进行计算：

computed:{
    calculateTotal : function (){
        // 找到当前选中的学术等级
        const selectedLevel = this.AcademicLevels.find(item => item.id === this.selectedAcademicId);
        if (!selectedLevel) return 0; // 容错处理
        
        const base_price = parseFloat(selectedLevel.price);
        const work_level_price = this.calculatePercentage(base_price, 10);
        const unit_price = base_price + work_level_price;
        const amount = unit_price * 2;
        
        return amount;
    }
}

4. 保留百分比计算方法（无需修改） #

methods: {
    calculatePercentage(basePrice, percentageToAdd){
        const number = (parseFloat(basePrice) * parseFloat(percentageToAdd)) / 100;
        return Number(parseFloat(number));
    }
},

修改后效果：

• 页面加载时第一个按钮自动激活
• 点击任意按钮会同步切换激活状态
• 总价卡片会根据选中的学术等级实时计算并显示正确结果

内容的提问来源于stack exchange，提问作者Kevin Otieno