Vue中如何实现v-for循环内按钮的disabled属性随组件prop动态更新？

这个问题我太熟了！你遇到的核心问题是：组件的data只会在初始化时赋值一次——你在data里定义actions的时候，disabled: this.rowEditingDisabled只是把当时prop的快照存了下来，之后当父组件的isDisabled变化、子组件的rowEditingDisabled prop更新时，actions数组里的disabled属性并不会自动跟着同步。

下面给你三种可行的解决方案，按推荐程度排序：

方案1：用计算属性生成actions（最推荐） #

把actions改成计算属性，这样它会自动依赖rowEditingDisabled prop，每次prop更新时都会重新生成数组，确保disabled值是最新的：

export default {
  props: {
    rowEditingDisabled: Boolean,
  },
  computed: {
    actions() {
      return [
        {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
      ];
    }
  },
  methods: {
    edit(id) {
      // 这里写你的编辑逻辑
    }
  }
};

把这个逻辑套到你的演示代码里，子组件会变成这样：

Vue.component('child', {
  template: `
    <div>
      <v-btn :disabled="rowEditingDisabled">This works!</v-btn>
      <v-btn v-for="action in actions" :key="action.icon" :disabled="action.disabled" icon @click="action.click">
        <v-icon>{{ action.icon }}</v-icon>
      </v-btn>
    </div>`,
  props: {
    rowEditingDisabled: Boolean,
  },
  computed: {
    actions() {
      return [
        {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
      ];
    }
  },
  methods: {
    edit() {
      console.log('编辑按钮被点击');
    }
  }
})

此时定时器切换isDisabled时，两个按钮的禁用状态会完全同步。

方案2：监听prop变化手动更新actions #

如果不想改动actions的定义方式，也可以用watch监听rowEditingDisabled的变化，手动更新数组里对应项的disabled值：

export default {
  props: {
    rowEditingDisabled: Boolean,
  },
  data() {
    return {
      actions: [
        {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
      ],
    };
  },
  watch: {
    rowEditingDisabled(newVal) {
      // 找到对应的action并更新disabled状态
      const editAction = this.actions.find(action => action.icon === 'mdi-pencil');
      if (editAction) editAction.disabled = newVal;
    }
  },
  methods: {
    edit(id) {
      // 你的编辑逻辑
    }
  }
};

这种方式适合actions结构复杂、无法用计算属性快速生成的场景。

方案3：模板里直接绑定prop（最简化） #

如果actions里的disabled只是简单对应rowEditingDisabled prop，其实可以跳过把disabled存到action里的步骤，直接在模板里绑定prop：

<v-btn v-for="action in actions" :key="action.icon" :disabled="rowEditingDisabled" icon @click="action.click(item.id)">
  <v-icon>{{ action.icon }}</v-icon>
</v-btn>

对应的data里的actions就不需要disabled字段了：

data() {
  return {
    actions: [
      {icon: 'mdi-pencil', click: this.edit},
    ],
  };
}

这种方式最直接，适合逻辑简单的场景。

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