v-for 中基于组件 prop 的禁用属性

Question

假设我有这个：

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

动作定义如下：

export default {
  props: {
    rowEditingDisabled: Boolean,
  },
  data() {
    return {
      actions: [
        {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
      ],
    };
  },
};

如何才能在组件属性“rowEditingDisabled”更新时更新禁用属性？

这是一个片段，展示了我的意思：

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(item.id)">
        <v-icon>{{ action.icon }}</v-icon>
      </v-btn>
    </div>`,
  props: {
    rowEditingDisabled: Boolean,
  },
  data() {
    return {
      actions: [
        {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
      ],
    };
  },
})
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      isDisabled: true
    };
  },
  created() {
    setInterval(() => {
      this.isDisabled = !this.isDisabled;
    }, 1000);
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <child :row-editing-disabled="isDisabled"></child>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

当我只使用 prop 时它可以工作，但是当我将它放入数组中时它就不再工作了。

Answer 1

请确保您观察道具中的更改，如下所示：

export default {
    props: { rowEditingDisabled: Boolean, },
    data() {
        return {
            actions: [{
                icon: 'mdi-pencil',
                disabled: false, 
                click: this.edit
            }], 
        }; 
    },
    watch: { 
        rowEditingDisabled: function(newVal, oldVal) { 
            // watch it
            console.log('Prop changed: ', newVal, ' | was: ', oldVal);
            this.actions[0].disabled = newVal;
        }
    },
};