Develop Reference

Show tooltip in Autocomplete dropdown items using Vuetify

I'm new to Vue.js and Vuetify
Problem - To show tooltip on each dropdown item in v-autocomplete
Solution - added v-tooltip component in item template
Code:
var app = new Vue({
el: "#app",
data: {
items: [{
value: 0,
text: "Matthews Webb"
},
{
value: 1,
text: "Teresa Ward"
},
{
value: 2,
text: "Cervantes Swanson"
},
{
value: 3,
text: "Helga Cooper"
},
{
value: 4,
text: "Solomon Jensen"
},
{
value: 5,
text: "Eliza Delgado"
},
{
value: 6,
text: "Dickson Parks"
},
{
value: 7,
text: "Etta Glenn"
},
{
value: 8,
text: "Alma Durham"
},
{
value: 9,
text: "Rosemary Conner"
}
],
selected: []
}
});
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-autocomplete :items="items" v-model="selected" clearable multiple>
<template v-slot:item="data">
<v-tooltip right>
<template slot="activator" slot-scope="{ on }">
<v-list-tile-action>
<v-checkbox v-model="selected" :value="data.item.value"></v-checkbox>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-html="data.item.text" v-on="on"></v-list-tile-title>
</v-list-tile-content>
</template>
<span>{{ data.item.text }}</span>
</v-tooltip>
</template>
</v-autocomplete>
</v-container>
</v-content>
</v-app>
</div>
Problems after implementing the solutions:
Checkboxes are not clickable or item cannot be selected if clicked on the checkbox
On searching the item some of the checkboxes shows selected
Vue Version - 2.6.12
Vuetify Version - 1.5.24
Is there any other way to show tooltip on autocomplete dropdown items without disturbing the functionality or is there any mistake in my solution

Solution:
The v-input--selection-controls__ripple Div overlaps the input box of the selection control; hence binds to the click instead.
To fix this I applied a simple CSS Hack. Conceptually position it above by using position and z-index:-10 for the div.
that is illustrated with edits marked below as /* <--------------- */
<div class="v-input__slot">
<div class="v-input--selection-controls__input">
<input aria-checked="false" role="checkbox" type="checkbox" value="1" style="
position: relative; /* <--------------- */
">
<div class="v-input--selection-controls__ripple" style="
position: absolute; z-index: -10; /* <--------------- */
"></div>
<i aria-hidden="true" class="v-icon material-icons theme--light">check_box_outline_blank</i>
</div>
</div>

Appending an icon to a table column in vuetify data table?

I have a Vuetify data table and I am trying to append an icon to just the <td> with protein in it but the way it is being rendered, I am not able to understand how would I go about it?
So I have component which is being imported into the Vuetify data table template and that component separately consists of the icon div.
<template>
<v-data-table>
<template v-slot:items="props">
<my-component
:protein="props.item.protein"
:carbs="props.item.carbs"
:fats = "props.item.fats"
:iron="props.item.iron"/>
</template>
<v-data-table>
</template>
And in my component i have the template setup like this:-
<template>
<tr>
<td>
<v-checkbox> </v-checkbox>
<td>
<div>
<router-link>
<i class="fa fa-globe"></i>
</router-link>
</div>
</tr>
</template>
Not sure how I can append the icon to the protein field?

If I understood your question correctly, you want dynamic icons for (or appended onto) the protein fields, so here's one way to achieve that:
Vue.component('MyComponent', {
template: `
<tr>
<td><i :class="['fa', 'fa-'.concat(protein)]"></i></td>
<td>{{carbs}}</td>
<td>{{fats}}</td>
<td>{{iron}}</td>
</tr>
`,
props: ['protein', 'carbs', 'fats', 'iron']
});
new Vue({
el: '#demo',
data: () => ({
opts: {
headers: [
{ text: 'Protein', value: 'protein' },
{ text: 'Carbs', value: 'carbs' },
{ text: 'Fats', value: 'fats' },
{ text: 'Iron', value: 'iron' }
],
items: [
{ protein: 'cutlery', carbs: 4, fats: 1, iron: 5 },
{ protein: 'shopping-basket', carbs: 5, fats: 5, iron: 0 },
{ protein: 'beer', carbs: 2, fats: 9, iron: 3 }
],
hideActions: true
}
})
})
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.js"></script>
<div id="demo">
<v-data-table v-bind="opts">
<template #items="{ item }">
<my-component v-bind="item"></my-component>
</template>
</v-data-table>
</div>

Hope this helps someone.
<template>
<v-data-table>
<template v-slot:item.protein="{ item }">
<i class="fa fa-globe"></i>{{ item.protein }}
</template>
</v-data-table>
</template>

Implementing Vue draggable

i am trying to implement vue draggable and it almost seems to work except for when i try to implement it on a button. It gives me an error message whenever i try to move the button.
Here is an example : https://codepen.io/anon/pen/xoQRMV?editors=1111
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center>
<v-flex>
<draggable v-model="myArray" :options="options" handle=".handle">
<div v-for="element in myArray" :key="element.id" class="title
mb-3">{{element.name}}
<v-icon color="red" class="handle mt-0">drag_handle</v-icon>
</div>
<v-btn class="ml-0">Button</v-btn>
<v-icon color="red" class="handle">drag_handle</v-icon>
</draggable>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
data() {
return {
myArray: [
{name: 'Text1!!!!', id: 0},
{name: 'Text2!!!!', id: 1},
],
options: {
handle: '.handle'
}
}
}
})
Any help is appreciated.

It would have to work from a single array I think, e.g.
https://codepen.io/anon/pen/agQVvm?editors=1111
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center>
<v-flex>
<draggable :list="combinedArray" :options="options" handle=".handle">
<div v-for="element in combinedArray" :key="element.id" class="title mb-3">
<div v-if="element.type !== 'button'" class="title mb-3">
{{ element.name }}
<v-icon color="red" class="handle mt-0">drag_handle</v-icon>
</div>
<div v-else>
<v-btn>{{ element.name }}</v-btn>
<v-icon color="red" class="handle mt-0">drag_handle</v-icon>
</div>
</div>
</draggable>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
created () {
this.combinedArray = [...this.myArray, ...this.buttonsArray]
},
data () {
return {
myArray: [
{ name: 'Text1!!!!', id: 0 },
{ name: 'Text2!!!!', id: 1 }
],
buttonsArray: [
{ name: 'Button1', id: 2, type: 'button' },
{ name: 'Button2', id: 3, type: 'button' }
],
combinedArray: [],
options: {
handle: '.handle'
}
}
}
})

I was able to implement the drag on buttons by creating their own array:-
<draggable class="list-group" :list="buttonArray" :options="options"
handle=".handle" group="drags">
<div v-for="item in buttonArray" :key="item.id">
<v-btn class="ml-0">{{item.name}}</v-btn>
<v-icon color="red" class="handle">drag_handle</v-icon>
</div>
</draggable>
buttonArray: [
{name: 'Button1', id: 2},
{name:'Button2', id:3}
],
The updated pen:- https://codepen.io/anon/pen/xoQRMV?editors=1111
However it creates an issue where i am not able to replace the text with the button. :(

Language Switcher doesn't apply the new locale

I'm starting a new website with Nuxt and I'm currently setting it to be multilingual (french and english)
I followed this tutorial to setup the translation and the language switcher, and got the following:
nuxt.config.js (relevant part)
['nuxt-i18n', {
detectBrowserLanguage: {
useCookie: true,
alwaysRedirect: true
},
strategy: 'prefix_except_default',
defaultLocale: 'fr',
parsePages: false,
seo: true,
pages: {
about: {
en: '/about-us',
fr: '/a-propos'
},
portfolio: {
en: '/projects',
fr: '/portfolio'
}
},
locales: [
{
code: 'en',
iso: 'en-US',
name: 'English',
file: 'en-US.js'
},
{
code: 'fr',
iso: 'fr-FR',
name: 'Français',
file: 'fr-FR.js'
}
],
lazy: true,
langDir: 'lang/'
}]
navbar.vue
<nav class="header">
<div class="logo">
<nuxt-link :to="localePath('index')">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</nuxt-link>
</div>
<div class="links">
<nuxt-link :to="localePath('about')">
{{ $t('navbar.about') }}
</nuxt-link>
<nuxt-link :to="localePath('blog')">
Blog
</nuxt-link>
<nuxt-link :to="localePath('portfolio')">
Portfolio
</nuxt-link>
<nuxt-link :to="localePath('contact')">
Contact
</nuxt-link>
<span>|</span>
<nuxt-link v-if="$i18n.locale === 'fr'" :to="switchLocalePath('en')">
English
</nuxt-link>
<nuxt-link v-else :to="switchLocalePath('fr')">
Français
</nuxt-link>
{{ $i18n.locale }}
</div>
</nav>
Here is my directory structure (if that can help)
layouts/
front.vue
navbar.vue
pages/
index.vue
about.vue
blog.vue
portfolio.vue
contact.vue
The navbar.vue file is called inside front.vue, which is my layout.
The problems are the following:
On any page, when I try to click the languageSwitcher link, I get redirected to its english version (ie: /a-propos becomes /en/about-us), however the other links will bring me back to the french version.
{{ $i18n.locale }} keeps displaying fr
I tried the following block of code:
<template>
...
<nuxt-link
v-for="locale in availableLocales"
key="locale.code"
:to="switchLocalePath(locale.code)"
>
{{ locale.name }}
</nuxt-link>
...
</template
<script>
export default {
computed: {
availableLocales () {
return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
}
}
}
</script>
And it only displays english, while it should display me both english and french.
What have I done wrong, or what am I missing?

This worked for me, using vue-select and availableLocales of Nuxt-$i18n, hope it helps:
<template>
<div>
<client-only>
<b-navbar>
<div class="container">
<b-navbar-brand
class="navbar-brand-custom mr-2"
:to="localePath('index')"
:title="title">
<div class="d-flex flex-row order-2 order-lg-3 ml-auto text-capitalize">
<b-navbar-nav class="d-flex flex-row">
<!-- Language menu -->
<v-select
v-model="selected"
v-for="(lang, index) in availableLocales"
:key="index"
:value="lang.code"
:searchable="false"
#input="onChange"
class="vue-select-custom"
></v-select>
<!-- Navbar menu -->
<b-nav-item-dropdown
id="menu-links"
right
no-caret
role="manu"
class="ml-0"
menu-class="animated fadeIn text-right menu-links rounded-0"
>
<span class="dropdown-menu-arrow"></span>
<template
v-slot:button-content
style="height:42px"
>
</b-nav-item-dropdown>
</b-navbar-nav>
</div>
</div>
</b-navbar>
</client-only>
<script>
export default {
data() {
return {
selected: this.$i18n.locale
}
},
computed: {
availableLocales() {
return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
},
},
.....
methods: {
onChange(locale) {
var language = locale.toLocaleLowerCase();
this.$i18n.setLocaleCookie(language)
this.$router.replace(this.switchLocalePath(language));
},
....
}
}

this is due to alwaysRedirect: true, set it to false

Vue updates all button text after changing specific button

Hi everyone I'm playing around with Vue JS but for some how I cannot get what I expected. Below are my code.
Template
<div id="app">
<v-app id="inspire">
<div class="text-xs-center" v-for="x in count" :key="x">
<v-menu offset-y>
<v-btn
slot="activator"
color="primary"
dark
>
{{name}}
</v-btn>
<v-list>
<v-list-tile
v-for="(item, index) in items"
:key="index"
#click="test(item.title)"
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</v-app>
</div>
Vue
new Vue({
el: '#app',
data: () => ({
name: 'default',
items: [
{ title: 'Click Me 1' },
{ title: 'Click Me 2' },
{ title: 'Click Me 3' },
{ title: 'Click Me 2' }
],
count: 10
}),
methods: {
test(title) {
this.name = title
}
}
})
What I want is that when I change a specific button text the other buttons should not be affected. But it seems my code is doing the opposite. What am I missing here? Any help, explanation would be much appreciated. Thanks
new Vue({
el: '#app',
data: () => ({
name: 'default',
items: [
{ title: 'Click Me 1' },
{ title: 'Click Me 2' },
{ title: 'Click Me 3' },
{ title: 'Click Me 2' }
],
count: 10
}),
methods: {
test(title) {
this.name = title
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.3/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.3/dist/vuetify.min.css">
<div id="app">
<v-app id="inspire">
<div class="text-xs-center" v-for="x in count" :key="x">
<v-menu offset-y>
<v-btn
slot="activator"
color="primary"
dark
>
{{name}}
</v-btn>
<v-list>
<v-list-tile
v-for="(item, index) in items"
:key="index"
#click="test(item.title)"
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</v-app>
</div>

You are iterating over a normal number, in your example 10, so you are just showing 10 times the same variable name.
If you now change that variable name to something, it will change in all the buttons accordingly.
You need some way to save the different names, e.g. an array of objects like your items with all the titles.
I took your code and changed it a bit. Instead of iterating over a fixed count, I created an array of names and iterate over that array. When you click one of the buttons and change the text, instead of just changing the universal name attribute - you change the name at the position in the array.
new Vue({
el: '#app',
data: () => ({
names: [
{name: 'default 1'}, {name: 'default 2'}, {name: 'default 3'}, {name: 'default 4'}],
items: [
{ title: 'Click Me 1' },
{ title: 'Click Me 2' },
{ title: 'Click Me 3' },
{ title: 'Click Me 4' }
],
}),
methods: {
test(title, index) {
this.names[index].name = title
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.3/vuetify.css.map">
<div id="app">
<v-app id="inspire">
<div class="text-xs-center" v-for="(x, index) in names" :key="'name' + index">
<v-menu offset-y>
<v-btn
slot="activator"
color="primary"
dark
>
{{x.name}}
</v-btn>
<v-list>
<v-list-tile
v-for="(item, i) in items"
:key="'item' + i"
#click="test(item.title, index)"
>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</v-app>
</div>