I have created an example usage of v-autocomplete vuetify component.
When I input “t” in the search form it properly shows 1 item, but when I input “e” after that I get “no data available” box, what am I doing wrong?

In a VueJS/Vuetify project, there’s the following initial data:

The idea is as follows: there is a V-Stepper component, it contains few steps. I’d like to trigger the action of sliding to the next step when a validateDirectory method completes successfully (i.e. the next step button isn’t clicked physically, but the step gets invoked programmatically).

This image shows what is going on… Box Five has extra text, and I am using fill-height on all v-cards to make matching heights for all cards..but this is only applied per row, not to all rows inside the v-row. Without hard-coding a specific height for all my cards, how can I make all cards be a uniform height?

I have a vuetify button that uploads form data to our api then once the response comes back clears the data. However, I am concerned a user could double click the button and it will send the data twice. Is there a built in way to disable a double click or triple click or whatever in vuetify v-btn? Or do I need to create a completely separate reactive model to disable the button while the method completes?

I am struggling to get my vuetify form to function as intended. I was trying to get my form to validate once I hit submit without refreshing but also my two components one depends on the other. There is a select box and if one or the other entry is chosen from the list then the rules change for the file in put to be only pdf and a singular entry. I am unsure how to get this to work as now the form does not validate based on those dynamic rules.

I’m trying to use VTooltip with an activator passed as a slot, my slot renders correctly, but the tooltip won’t open on hover. If I remove the slot to use a hardcoded content it works. Did I miss something here?

While integrating a custom v-select component, I discovered the following behavior:

I’ve just retired and I’ve been trying to teach myself Vue and Python as hobby by writing a front-end (Vuetify) and back-end (DRF) to monitor our energy usage and cost. It’s been a challenge but all my CRUD functionality to maintain supplier, contract, tariff and meter reading data is working. Now I want to show the gas and net electricity use and how much the solar panels have generated in a chart. I think I’m fairly close and would be very grateful if someone could take a look at the following files and show me what I’m missing. They’re not so long so I posted all the code.

Just created a fresh Vue3 app, installed Vuetify and I can’t wrap my head around this. Why are there two columns? I want content of my component centered but it just doesn’t make sense at what place the page is divided into two columns if there is absolutely no place where I am using cols or whatever: