v-for中基于組件屬性的禁用屬性

說我有這個：

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

當我只使用道具時它可以作業，但是當我把它放在一個陣列中時它就不再起作用了。

uj5u.com熱心網友回復：

請確保您觀看道具中的更改，如下所示：

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;
        }
    },
};

uj5u.com熱心網友回復：

嘗試將你的道具傳遞給函式：

Vue.component('child', {
  template: `
    <div>
      <v-btn v-for="action in actions" :key="action.icon" :disabled="action.disabledWatch" icon
         @click="action.click(item.id)">
        <v-icon>{{ action.icon }}</v-icon>
      </v-btn>
    </div>`,
  props: {
    rowEditingDisabled: Boolean,
  },
  data() {
    return {
      actions: [
        {icon: 'mdi-pencil', disabledWatch: this.rowEditingDisabled, click: this.edit},
      ],
    };
  },
  watch: {
    rowEditingDisabled(newValue) {
      this.actions[0].disabledWatch = newValue
    }
  }
})
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      isDisabled: true
    };
  },
})

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <button @click="isDisabled = !isDisabled">click</button>
        <child :row-editing-disabled="isDisabled"></child>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

uj5u.com熱心網友回復：

從該data()方法中，您可以使用參考組件的屬性this.

你可以試試這個：

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

更新：根據我上面提到的理解創建了一個作業示例代碼片段，它作業正常。您能否交叉檢查propsin 模板的命名約定，它應該用連字符分隔。即:row-editing-disabled="..."。

作業演示：

Vue.component('post', {
  template: '#post-template',
  props: {
    rowEditingDisabled: Boolean
  },
  data() {
    return {
      actions: [
        {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit}
      ]
    };
  }
});

var vm = new Vue({
  el: '#app',
  data: {
    isRowEditingDisabled: true,
  }
});

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  <post :row-editing-disabled="isRowEditingDisabled"></post>
</div>

<template id="post-template">
  <button v-for="action in actions" :key="action.icon" :disabled="action.disabled">
    Click Me!
  </button>
</template>

標籤：javascript Vue.js

上一篇：將兩個不同陣列中的第一項合并為一個-Javascript

下一篇：卡在使用.JS.filters/.map選擇之間