Vue.js：表单未填写时禁用移除按钮，填写项目编号并点击查询后激活按钮的问题求助（已解决）

很高兴你已经搞定这个问题啦！我来把正确的实现方式整理出来，帮其他碰到同样需求的开发者避坑~

原代码的问题分析 #

你之前的代码里，给按钮用了v-model="form.ProjectNumber = ''"是不正确的——v-model是用来绑定表单输入元素（比如输入框、复选框）和数据的，按钮并不需要这个指令。而且你把:disabled固定设为true，这样按钮永远不会被激活，这就是之前功能不生效的核心原因。

正确的实现思路 #

我们需要达成两个核心目标：

• 初始状态下，因为「项目编号」为空，所以「移除项目」按钮处于禁用状态
• 当用户填写「项目编号」并点击「查询」按钮后，只要「项目编号」有有效内容，就自动激活移除按钮

修正后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- 项目编号输入与查询区域 -->
  <b-form-group label="Project Number" label-cols-lg="4" class="mb-3">
    <b-input v-model="form.ProjectNumber" placeholder="Enter project number"></b-input>
    <button class="mt-2 btn btn-primary" size="sm" @click="findProject">Find</button>
  </b-form-group>

  <!-- 移除项目按钮区域 -->
  <b-form-group class="mb-0 mt-3" label-cols-lg="4">
    <button 
      :disabled="!form.ProjectNumber.trim()" 
      class="w-100 btn btn-danger" 
      size="sm" 
      @click="RemoveProjectQuestion"
    >
      Remove Project
    </button>
  </b-form-group>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      form: {
        ProjectNumber: ''
      }
    }
  },
  methods: {
    findProject() {
      // 这里写入你的查询逻辑，比如调用后端接口获取项目信息
      console.log('正在查询项目:', this.form.ProjectNumber);
      // 只要ProjectNumber有非空值，按钮会自动激活，无需额外修改状态
    },
    RemoveProjectQuestion() {
      // 这里写入移除项目的业务逻辑
      console.log('准备移除项目:', this.form.ProjectNumber);
    }
  }
})
</script>

关键细节说明 #

• 移除了按钮上错误的v-model绑定，改用:disabled="!form.ProjectNumber.trim()"——当「项目编号」为空或仅含空格时，按钮保持禁用；有有效内容时自动启用
• 「查询」按钮的findProject方法执行后，只要用户输入了有效项目编号，按钮状态会自动响应更新
• 如果你的查询逻辑是异步请求（比如调用后端接口），只需在请求成功后确保form.ProjectNumber被正确赋值，按钮依然能正常激活

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