Vue中如何在未选任何选项前禁用Next按钮？

你的核心问题是Next按钮的禁用条件绑定错误，和是否使用input标签无关。当前你把:disabled绑在了handleCompanySize函数上，这会导致Vue将函数本身当作布尔值判断（函数存在即为true，按钮会一直处于禁用状态），正确的做法是绑定「是否已选中选项」的判断逻辑。

修正步骤： #

1. 确保companySize初始化时处于未选中状态（比如设为null或undefined）：

   // Vue3示例，Vue2逻辑类似
   const companySize = ref(null);
   
   function handleCompanySize(val) {
     companySize.value = val;
   }
   

2. 修改Next按钮的禁用绑定，判断companySize是否未被赋值：

   <div>
       <button @click="handleCompanySize(100)">
           <CheckIcon v-show="companySize === 100"/>
       </button>
       <button @click="handleCompanySize(101)">
           <CheckIcon v-show="companySize === 101"/>
       </button>
   </div>
   
   <button :disabled="!companySize" @click="next">
       Next
   </button>
   

逻辑说明： #

• 单选功能已经通过companySize的赋值实现，点击不同按钮时会覆盖之前的数值，保证同一时间只有一个选项被标记。
• :disabled="!companySize"表示当companySize为null/undefined（未选中任何选项）时，按钮处于禁用状态；一旦选中某个选项，companySize有了具体值，禁用状态自动解除。

内容的提问来源于stack exchange，提问作者Lim Han Yang