Question

我的视图中有一个按钮

<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},
            ],
...

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

我尝试过类似的事情：

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

但是它给了我以下错误：

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

请帮助我解决此问题。

Answer 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元素上使用它）

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

1 个答案: