Vuetify 溢出组件中的动态禁用选项答案

【问题标题】：Dynamically disable option in Vuetify overflow componentVuetify 溢出组件中的动态禁用选项
【发布时间】：2020-05-03 02:14:49
【问题描述】：

Vuetify disabled prop 直接禁用输入本身。我正在尝试根据页面上的内容禁用单个选择选项。如果我们将 disabled="string" 传递给 items 数组（静态排列）。

如何使其动态化。我已经为相同的 https://codepen.io/spider007/pen/eYmLBOG 制作了 Codepen

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-overflow-btn
        class="my-2"
        :items="items"
        label="Overflow Btn - Dense"
        dense
        v-model="recordToAdd"
      ></v-overflow-btn>

      <p v-if =" recordToAdd === '1' ">A's content is here -- i.e, Option        A must be disabled in selection option</p>

    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    recordToAdd : "",
    items: [
        {text:"A",value:"1"},
        {text:"B",value:"2"},
        {text:"C",value:"3"},        
    ],
  }),
})

【问题讨论】：

@你知道怎么做吗？>
我不确定我是否理解您的问题：如果用户选择选项 A，您是要禁用选项 A，还是如果用户选择选项 B，则禁用选项 B？跨度>
@Dan 是的，我希望它在属于该项目的内容存在时禁用。

标签： vue.js vuetify.js

【解决方案1】：

您只需在数据中添加disabled: true即可。

<template>
...
  <v-overflow-btn
    class="my-2"
    :items="dropdown"
    label="Test"
    segmented
    target="#dropdown-example"
  />
...
</template>

...
  data() {
    return {
      disabled: false,
      dropdown: [
        // Always disabled
        { text: 'disabled option', callback: () => console.log('disabled'), disabled: true },
        // disable depending on another variable
        { text: 'depending', callback: () => console.log('Hello'), disabled: this.disabled },
        { text: 'other Option', callback: () => console.log('Option') },
      ]
    }
  },

【讨论】：