Bootstrap-vue modal在函数中操作ok-disabled状态答案

【问题标题】：Bootstrap-vue modal manipulate ok-disabled state in functionBootstrap-vue modal在函数中操作ok-disabled状态
【发布时间】：2022-11-05 02:26:43
【问题描述】：

我已将 Bootstrap-Vue 模态中的默认 OK 按钮设置为禁用 true，并希望在 ab-form-input 中输入内容时更改它。调用该函数有效，但禁用 ok-disabled 无效。无法访问该物业。似乎是一个非常基本的问题，但在 bootstrap-vue 的组件文档中，只有状态可以更改（真假）的信息，但不能通过脚本进行操作。

<template>
    <b-modal
      id="component-modal"
      title="Add Component"
      @ok="handleOk"
      :ok-disabled="true"
    >
        <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,
    };
  },
  methods: {
    handleOk() {
      this.handleSubmit();
    },
    handleSubmit() {
      this.insertComponentClass(this.component, store.state.project);
      delete this.component;
    },
    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.ok-disable = false; // doesnt wor, linter says "Invalid left-hand side in assignment expression"
    },
  },
};
</script>

【问题讨论】：

标签： bootstrap-vue

【解决方案1】：

这里发生了一些不正确的事情。

您将 ok-disabled 属性绑定到模板中的硬编码值 true。如果您希望更改该值，则需要将其绑定到可以在组件中更新的变量<script>

例如，您可以将模态的 :ok-disabled 属性更新为：

:ok-disabled="okDisabled"

然后在您的 <script> 数据函数中，将其添加到返回对象（默认为 true）：

data() {
  return {
    count: 0,
    okDisabled: true,
  }
}

现在模态的 :ok-disabled 属性绑定到该变量，我们可以更改 enableOk 方法中的值，如下所示：

this.okDisabled = false;

关于 lint 错误的注意事项，您尝试分配给this.ok-disable 的变量名称不是有效的变量名称。 Javascript 变量名不能使用破折号 (-) 字符。您可以将其重命名为我们之前创建的属性this.okDisabled

【讨论】：