Utilizing the no-data-text attribute in v-combobox with Vuetify: Tips and tricks

My application includes a simple combobox, and I am trying to set a default text message to display when there are no entries in the items props. To achieve this goal, I utilized the no-data-text prop by passing a specific variable to it.

<v-combobox
    :items="someValues"
    dark
    color="white"
    :no-data-text="noDataText"
    ></v-combobox>

I anticipated that clicking on the empty combobox would trigger my specified message to appear. In the past, I successfully used a similar method with select elements. How can I make the same behavior work with the combobox?

javascriptvue.jsvuetify.js

Answer №1

To specify the text label, you can utilize the label attribute:

<v-combobox
  :items="optionsList"
  dark
  color="black"
  :label="selectText"
></v-combobox>

If you want to control when the label appears based on whether there are any options in the list, you can do so conditionally:

<v-combobox
  :items="optionsList"
  dark
  color="black"
  :label="optionsList && optionsList.length ? '' : selectText"
></v-combobox>

Answer №2

What version of Vuetify are you currently using?

It seems that Vuetify 2.4.3 has the functionality you're looking for, but it might not be working as expected.

In the meantime, you can explore the Slot alternative. Below is an example showcasing both versions:

View documentation for "no-data-text" prop

View documentation for "no-data" slot

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcdad3d2c8fc8892c4">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2d2e3e2f323d221b697523">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cecdddf88a96c0">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63151606170a051a23514d1b">[email protected]</a>/dist/vuetify.js"></script>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML5 validation fails to activate

Addressing the issue head-on Check out the form I have created: <form action="<?php echo base_url()?>" method="post" id="formfield"> <center> <label>How much? <small>( Minimum of 100 )</small></label&g ...

javascriptphphtml

Exploring arrays with JavaScript and reading objects within them

Recently, I received assistance from a member of StackOverflow regarding AJAX calls. However, I have encountered a problem now. The code consists of a loop that sends requests to multiple REST APIs and saves the results in an array as objects. The issue ...

javascriptjqueryajaxasynchronous

Use Yii2 to pass an ID when a button is clicked in order to render a partial using

On the index page, I display all the rows and some fields from my model. When a button is clicked, I want a modal to appear with all the data from the corresponding row. When the button is clicked, I need an ajax call to render a partial view. This will i ...

javascriptjqueryajaxyii2

Rails assets folder is not directed to the specified directory in the layout file

I have a dilemma in the application layout where I'm referencing assets (js, css, and img) in the public/assets/... directory. For example: <link href='assets/images/meta_icons/apple-touch-icon-144x144.png' rel='apple-touch-icon-pre ...

javascriptcssruby-on-railspathassets

"Utilizing AJAX to dynamically extract data from PHP and manipulate it in a multi-dimensional

Just starting out with JSON/AJAX and I'm in need of some help... I have a PHP page that seems to be returning [{"id":"1"},{"id":2}] to my javascript. How can I convert this data into something more user-friendly, like a dropdown menu in HTML? Here i ...

javascriptajaxjson

Ways to add AJAX information to select2

I am currently utilizing a select2 dropdown feature and I am attempting to configure it in such a way that it dynamically displays the leads based on the JSON response. As you can observe in the image provided below, the text correctly yields a JSON array ...

javascriptjqueryajax

Search through an array of objects and assign a new value

I am facing a challenge with an array of objects structured as shown below: [ { "e_id": "1", "total": 0 }, { "e_id": "3", "total": 0 } ] My objecti ...

javascriptarraystypescript

scrolling through a list using .slice choosing an excessive amount of items

Is it possible to create a dynamic pager that can be customized using parameters from the URL? I have noticed that when I hardcode the perTime variable, everything works fine. However, as soon as I try to use a parameter from the URL, the page starts behav ...

javascriptjquerypaginationpaging

Learning how to monitor the internal values of JSON data in Vue

I currently have an array named 'd' in my data and I am looking to monitor any changes that occur within its elements, keeping in mind that some of the elements are nested. To provide an example, if I were to change the value from Apple to Axe, ...

vue.js

Unable to persist information in Firebase's real-time database

I'm having trouble saving data to my firebase database. Although I don't see any errors on the site, the data in firebase remains null and doesn't change no matter what I do. Here is the code snippet. HTML <html> <head> ...

javascriptfirebasefirebase-realtime-database

How to disable the onChange event in PrimeNG p-dropdown?

I'm currently utilizing PrimeNG's dropdown component. Each option in the list includes an icon that, when clicked, should trigger a specific method. Additionally, I need to execute another method when the onChange event of the dropdown is trigger ...

javascriptangulartypescriptprimeng

Where is the best place to store common functions in Vue.js?

In my Vue JS project version 2.5.17, I am unsure about the placement of my generic functions. Is there a convention similar to Rails helpers that dictates where they should go? Can I simply create a file anywhere and import it as needed? ...

functionvue.jsarchitecturevuejs2helper

Ajax is not able to trigger a POST request to a PHP form

My form is not posting for some unknown reason, despite everything else on my server functioning properly. Below is the code snippet in question: PHP <?php if(isset($_POST['field1']) && isset($_POST['field2'])) { $data ...

javascriptphpjqueryajaxforms

Extrude a face in Three.js along its respective normal vector

My goal is to extrude faces from a THREE.Geometry object, and my step-by-step approach involves: - Specifying the faces to be extruded - Extracting vertices on the outer edges - Creating a THREE.Shape with these vertices - Extruding the shape using THREE.E ...

javascriptvectorthree.jsgeometry

Setting radio button selection programmatically in React Material-UI: A step-by-step guide

Currently utilizing a radio button group from material-ui. I have successfully set a default selection using defaultSelected, however, after rendering, I am unable to programmatically change it. The selection only updates upon clicking the radio. Is ther ...

javascriptreactjsmaterial-ui

When additional elements follow, the button ceases to function properly in JavaScript

I am working on creating a text-based idle game that involves multiple buttons and text around them. However, I have encountered an issue where the functionality stops working when I try to add text after the "Work" button. The callback function is no lon ...

javascripthtmlbutton

Setting a value to a FormBuilder object in Angular 2 with Typescript

During my use of Reactive form Validation (Model driven validation), I encountered an issue with setting the value to the form object on a Dropdown change. Here is my Formgroup: studentModel: StudentModel; AMform: FormGroup; Name = new FormControl("", Va ...

javascripthtmlangulartypescript

Facing an issue with webpack-dev-server where it displays a blank screen

Hello! I am currently in the process of creating my first MERN stack application, using Webpack as the build tool. The main objective is to have Express serving the APIs for the app and webpack-dev-server handling the static content (from my static directo ...

javascriptexpresswebpackwebpack-dev-server

I am selecting specific items from a list to display only 4 on my webpage

I am trying to display items from a list but I only want to show 4 out of the 5 available items. Additionally, whenever a new item is added, I want it to appear first on the list, with the older items following behind while excluding the fifth item. Despi ...

javascriptjqueryhtml

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

I am confused as to why, in my situation, <T> is considered a number but cannot be assigned to a parameter of type number. Changing the type of n to either number or any resolves the issue. Error: https://i.sstatic.net/h1GE9.png Code: const dropF ...

javascripttypescriptlodashtypescript-generics