如何在 vuetify 的 v-combobox 中使用 no-data-text 道具？
[英]How to use no-data-text prop in v-combobox in vuetify?
问题描述
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.
您好，我的应用程序中有一个简单的 combobox，我想指定当项目道具中没有条目时应在屏幕上显示的默认文本消息。
<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.出于上述目的，我使用名为 no-data-text 的道具并将一些变量传递给它。 I expected that when i click on the empty combobox, my message will be displayed.我希望当我点击空的 combobox 时，会显示我的消息。 I used such a mechanism in the past with some selects and it worked properly.我过去曾在一些选择中使用过这样的机制，它工作正常。 How to achieve such a behavior with combobox?如何使用 combobox 实现这种行为？
2 个解决方案
解决方案1
0 2021-01-31 12:56:33
You can use the label prop:您可以使用label道具：
<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:如果有someValues时不希望它出现在框上方，则可以有条件地使用它：
<v-combobox
:items="someValues"
dark
color="white"
:label="someValues && someValues.length ? '' : noDataText"
></v-combobox>
解决方案2
0 2021-01-31 19:24:15
Which vuetify version are you using?您使用的是哪个 vuetify 版本？
Actually vuetify 2.4.3 has that behaviour that your looking for but it just appears that its not working.实际上 vuetify 2.4.3 具有您正在寻找的行为，但它似乎不起作用。
Meanwhile, you can use the Slot alternative.同时，您可以使用 Slot 替代方案。 You can check both versions on the code below.您可以在下面的代码中检查这两个版本。
Prop documentation "no-data-text"道具文档“无数据文本”
Slot documentation ""no-data"插槽文档 ""no-data"
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.