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

2020-01-16 vue.js vuetify.js

Vuetify disable 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>

JS

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

Answers

您只需要在数据中添加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') },
      ]
    }
  },

Related