根据所选值启用/禁用按钮答案

【问题标题】：Enable/Disable Button based on selected value根据所选值启用/禁用按钮
【发布时间】：2019-02-18 08:50:02
【问题描述】：

我的视图中有一个按钮

<v-menu offset-y>
  <v-btn>
    Action Items
  </v-btn>
  <v-list>
   <v-list-tile
    v-for="(item, index) in items"
    :key="index"      
   :disabled="item.disabled"
  >
   <v-list-tile-title>{{ item.title }}</v-list-tile-title>
   </v-list-tile>
  </v-list>
 </v-menu>

<v-data-table
         v-model="selected">

我的数据看起来像

<script>

    export default {
        data: () => ({
            selected: [],
            items: [
                { title: 'Delete',disabled:false},
            ],
...

我正在尝试根据selected 数组是否有任何值来启用或禁用v-list-tile。

我试过类似的东西：

items: [
                { title: 'Delete',disabled:this.selected.length=0},
            ],

但它给了我以下错误：

[Vue warn]: Property or method "selected" is not defined on the instance but referenced during render.

请帮我解决这个问题。

【问题讨论】：

计算属性在这种情况下可能是理想的......

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

我想说，与其在模型上使用 disabled 属性，不如将其作为计算属性，如下所示：

computed: {
    disabled() {
        return this.selected.length < 1; // or === 0   
    }
}

然后在您的组件中使用disabled 属性。

<v-list-tile v-for="(item, index) in items"
   :key="index"      
   :disabled="disabled">

    <v-list-tile-title>
       {{ item.title }}
    </v-list-tile-title>

</v-list-tile>

PS：该道具作为该元素的禁用属性传递到您的v-list-tile。我不确定自定义组件是否会被禁用（否则你知道你会在真正的 html 元素上使用它）

【讨论】：