I'm currently working with Vuetify and facing an issue with applying a tooltip only for the append-icon in a v-text-field. The current problem is that the tooltip does not work for icons at all! View code on CodePen
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-text-field
label="Regular"
v-on="on"
append-icon="event"
style="max-width: 200px"
/>
</template>
<span>Tooltip</span>
</v-tooltip>
Unfortunately, there is no clear solution for this particular issue when using a certain API option. The problem lies in the component rendering the icon outside of the text area. Feel free to raise any concerns or suggestions by opening an issue or feature request on GitHub.
https://i.stack.imgur.com/vT8qb.png
If you switch to a basic <v-icon> component, you should find that it functions correctly.
For more information, you can visit the following link: Wrapping v-icon with v-tooltip inside text-field?
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
url: 'https://stackoverflow.com/'
}
})<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8d84859fabdfc593">[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="a9dfdcccddc0cfd0e99b87d1">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field label="Hello world">
<v-tooltip slot="append">
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="primary" dark>
mdi-calendar
</v-icon>
</template>
<span>My Tooltip</span>
</v-tooltip>
</v-text-field>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3244475772001c4a">[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="0f797a6a7b6669764f3d2177">[email protected]</a>/dist/vuetify.js"></script>Recently, I have been attempting to include the api_key in the get request parameter using axios Below is the snippet of my code: const instance = axios.create({ baseURL: "https://api.themoviedb.org/3" }); export function crudify(path) { function get ...
I am facing an issue with my Vue page where the correct category option is not being selected on page load based on the product's category id. I am unsure of what mistake I may have made in my code. Below is the code snippet: <template> ...
Currently, I am developing a hybrid app using Cordova and Vue.js. One of the features I want to implement is integrating WhatsApp into my app so that users can easily send images from the app to WhatsApp. Can anyone share how this can be achieved? ...
I am currently working on a situation where I need to dynamically assign methods to elements that are being generated by a template using a v-for loop. These methods will be assigned based on the value of a particular variable, specifically the 'btn.m ...
I am currently developing a Nuxt.js/Vue frontend for my Django Rest Framework backend. Despite specifying permissions to allow non-authenticated users to read-only, I am having trouble successfully loading data from my API. Index.vue import axios from &a ...
After following the Vue.js Docker tutorial, I encountered an unusual error message. 'sh: dist: unknown operand' This is the content of my Dockerfile: FROM node:lts-alpine RUN npm install -g http-server WORKDIR /app COPY package*.json ./ RUN ...
This is a custom component created by Jobs that triggers an event to its parent component. <div class="card py-1 my-1" @click="$emit('active-job', job.id, job.slug)"></div> The parent component is set up to listen ...
My understanding is that adding a key attribute to a component should make it reactive when the key changes. However, with a v-navigation-drawer from Vuetify, this doesn't seem to have any impact. I've tried making arbitrary changes to the logge ...
Utilizing Vuejs and lodash, I am attempting to retrieve all unique tags for questions in my simple question "app". However, lodash is returning all tags instead of just the unique ones. Below is how I have structured the array of questions and tags: creat ...
The data is not being added to the database even after entering the email and password for authorization in Firebase using vue.js. When I use: firebase.auth().createUserWithEmailAndPassword(this.email, this.password) The following code does not get execu ...
Encountering some issues with Express routes that are behaving inconsistently despite having identical code execution. The goal is to have a client application make API calls like this: async search(){ const query = this.$refs.searchInput.value; ...
I am currently dealing with a Vue Multiselect setup where the v-model is an array to accommodate multiple selected options. The challenge I am facing involves calling a route within the loadExtraOptions method and passing the array of IDs as a parameter ...
Below you will find the child and parent components. I am struggling to pass data from the child component to the parent component. Can you help me pinpoint where the issue may be? Child Component <template> <div> <v-btn class="r ...
Currently, I am encountering a minor issue with loading content through ajax requests. I am in the process of developing a web application where everything is located on one page without any reloading. To achieve this, I have split the content into separa ...
I am having difficulty displaying an image dynamically based on the path provided by an api call. While all other data is showing up correctly, the image is not. I have a suspicion that I might be entering the incorrect path. The frontend resides in a dire ...
I've been working on integrating vue-auth into my laravel-vue application, but I'm encountering some console errors: Error (@websanova/vue-auth): drivers/http/axios.js: http plugin has not been set. Uncaught TypeError: this.plugins.http is u ...
Struggling to implement replaceData, setData, or updateData functions in my project. I am using bootstrap vue along with tabulator tables. The API is functioning correctly. Tabulator works smoothly unless the API URL depends on the modal select option; how ...
Whenever I attempt to utilize a delete route after deploying, an error message is displayed: 419 | PAGE EXPIRED Failed to load resource: the server responded with a status of 419 () The function within the Vue component responsible for triggering the rout ...
Is there a way to reset the constant variable value in Vue? Here's what I have: data(){ const _hdrList = [ { label: 'start_time', value: 'start_time' }, { la ...
While working with Highcharts' export server to download charts as images, I encountered a challenge. I needed to implement the client-side (offline) exporting feature in a single chart due to the large number of data points. However, after enabling c ...