How to use no-data-text prop in v-combobox in vuetify?
Question
Hello i have a simple combobox in my application, and i would like to specify the default text message which should be shown on the screen when there are no entries in items props.
<v-combobox
:items="someValues"
dark
color="white"
:no-data-text="noDataText"
></v-combobox>
For the mentioned purpose i use prop called no-data-text and pass some variable to it. I expected that when i click on the empty combobox, my message will be displayed. I used such a mechanism in the past with some selects and it worked properly. How to achieve such a behavior with combobox?
2 answers
solution1
0 2021-01-31 12:56:33
You can use the label prop:
<v-combobox
:items="someValues"
dark
color="white"
:label="noDataText"
></v-combobox>
If you don't want it to appear above the box when there are someValues , you can use it conditionally:
<v-combobox
:items="someValues"
dark
color="white"
:label="someValues && someValues.length ? '' : noDataText"
></v-combobox>
solution2
0 2021-01-31 19:24:15
Which vuetify version are you using?
Actually vuetify 2.4.3 has that behaviour that your looking for but it just appears that its not working.
Meanwhile, you can use the Slot alternative. You can check both versions on the code below.
Prop documentation "no-data-text"
new Vue({ el: '#app', vuetify: new Vuetify(), data: () => { return { items: [], combobox: null } } })
<head> <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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-main> <v-container> <v-combobox v-model="combobox" label="Prop":items="items" no-data-text="[Prop] Sorry, we dont have data for you:"> </v-combobox> <v-combobox v-model="combobox" label="Slot":items="items"> <template v-slot,no-data> <p class="ml-3 mt-3">[Slot] Sorry: we dont have data for you.</p> </template> </v-combobox> </v-container> </v-main> </v-app> </div> <script src="https.//cdn:jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https.//cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.