如何通过函数控制Bootstrap-Vue Modal的ok-disabled状态？

问题出在你没有用响应式变量绑定ok-disabled属性，而是直接写死了true，同时脚本里的赋值语法也有误。按以下步骤修改即可：

1. 新增响应式状态变量 #

在组件的data中添加两个变量：

• component：用于绑定输入框的内容（之前你用了v-model="component"但没在data声明）
• isOkDisabled：控制OK按钮的禁用状态，初始设为true

2. 绑定Modal的ok-disabled属性 #

把b-modal的:ok-disabled="true"改成绑定到isOkDisabled变量：:ok-disabled="isOkDisabled"

3. 修正enableOK方法逻辑 #

不要直接写语法错误的this.ok-disable，而是修改isOkDisabled的值。更合理的逻辑是根据输入框内容是否为空来切换状态，而不是只要触发输入就设为false。

修改后的完整代码：

<template>
    <b-modal
      id="component-modal"
      title="Add Component"
      @ok="handleOk"
      :ok-disabled="isOkDisabled"
    >
        <div class="container">
            <b-row>
                <b-col>Component: </b-col>
                <b-col>
                    <b-form-input
                      v-model="component"
                      id="new-component"
                      required
                      @input="enableOK"
                    ></b-form-input>
                </b-col>
            </b-row>
        </div>
    </b-modal>
</template>

<script>
import axios from 'axios';
import store from '../../store';

export default {
  data() {
    return {
      count: 0,
      component: '', // 新增：绑定输入框的变量
      isOkDisabled: true // 新增：控制OK按钮禁用状态的变量
    };
  },
  methods: {
    handleOk() {
      this.handleSubmit();
    },
    handleSubmit() {
      this.insertComponentClass(this.component, store.state.project);
      this.component = ''; // 重置输入框，不要用delete
      this.isOkDisabled = true; // 提交后重新禁用按钮
    },
    insertComponentClass(componentClass, pid) {
      const path = `${store.state.apiURL}/componentclass/add`;
      const payload = {
        name: componentClass,
        project_id: pid,
      };
      axios
        .put(path, payload)
        .then(() => {
          this.$parent.getComponents();
        })
        .catch((error) => {
          console.error(error);
        });
    },
    enableOK() {
      console.info('enable ok fired');
      // 根据输入内容是否为空切换禁用状态
      this.isOkDisabled = !this.component.trim();
    },
  },
};
</script>

关键说明 #

• Vue的响应式依赖于data中声明的变量，所以必须把控制状态的变量放在data里，才能通过修改变量值自动更新视图
• @input触发时，通过this.component.trim()判断输入是否有效，确保只有输入了非空内容时才启用OK按钮
• 提交后重置输入框和按钮状态，提升用户体验

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