[Vuejs]-How to use no-data-text prop in v-combobox in vuetify?

by

0👍

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>

0👍

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"

Slot documentation ""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>

Leave a comment