Vue 组件按钮没有被动态禁用

Question

我有一个组件 command-button 包装了一个 Vuetify v-btn 组件。

command-button 接收一个名为 disabled 的布尔型属性，默认为非必需且为 false。

command-button 正在另一个名为 toolbar 的组件中使用，其中在 v-for 循环中，我使用 actions 对象的配置数组添加 command-button 作为属性传递给 toolbar。

<command-button
  v-for="(action, index) in actions"
  :key="index"
  :label="action.label"
  :disabled="action.disabled"
  @click="action.handler"
></command-button>

当我在 我的视图组件中使用我的 toolbar 组件时，如下所示：

<toolbar :actions="actions"></toolbar>

我在我的视图组件的数据中声明toolbar的actions，如下：

data() {
  return {
    ...        
    actions: [
      {
        label: "Delete",
        handler: this.onDelete,
        disabled: this.disable // This can be a computed or a data element
      },
      {
          label: "Add",
          handler: this.onAdd
      }
    ],
    ...
  },

问题是command-button 没有被动态禁用，无论我使用computed 还是data 中的成员。仅当我在 actions 配置对象中使用文字 true 时才有效。进行一些调试，在toolbar 内部接收到的actions 元素的disabled 属性值为undefined。

Answer 1

您不能在 data 对象中引用计算属性，因为在创建实例时不会定义它。您可以在 this.disable 上添加一个观察者，并在 actions[0].disabled 更改时更新它的值。