When a new account is registered, I display login and password details on the screen. The user can copy login&passwod details to clipboard and I would like to run animation when the append-icon (scale up, increase font or replace with another icon) is clicked. What would be the right way to do that?
<template>
<v-card class="col-12 col-md-8 col-lg-6 p-6 px-16" elevation="4">
<div class="title h2 mb-10 text-uppercase text-center">
Success
<v-icon color="green" x-large>
mdi-check-circle
</v-icon>
</div>
<v-text-field
:value="newAccount.login"
label="Login"
outlined
readonly
append-icon="mdi-content-copy"
ref='login'
#click:append="copy('login')"
></v-text-field>
<v-text-field
:value="newAccount.password"
label="Password"
outlined
readonly
append-icon="mdi-content-copy"
ref='login'
#click:append="copy('login')"
></v-text-field>
</v-card>
</template>
<script>
methods: {
copy(field) {
const input = this.$refs[field].$refs.input
input.select()
document.execCommand('copy')
input.setSelectionRange(0,0)
// apply append-icon animation
}
}
</script>
There is multiple answers to this, but to answer one of them: "replacing icon" would be pretty straight forward.
You would have to change the append-icon prop do be dynamic :, then assign a variable to it like copyIcon. You will then update this variable depending on the state of the copy.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
copyIcon: 'mdi-content-copy',
newAccount: {
login: 'GhostDestroyer69',
password: '',
},
},
methods: {
copy(field) {
const input = this.$refs[field].$refs.input
input.select()
document.execCommand('copy')
input.setSelectionRange(0, 0)
// Set icon to check
this.copyIcon = 'mdi-check'
// Reset icon to copy after 1 second
setTimeout(() => {
this.copyIcon = 'mdi-content-copy'
}, 1000)
}
}
})
<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">
<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>
<div id="app">
<v-card class="col-12 col-md-8 col-lg-6 p-6 px-16" elevation="4">
<v-text-field
:value="newAccount.login"
label="Login"
outlined
readonly
:append-icon="copyIcon"
ref='login'
#click:append="copy('login')"
></v-text-field>
</v-card>
</div>
mdi has animation helpers like
append-icon="mdi-content-copy mdi-spin"
For example.
Related
i have this v-select whose items charge dinamicaly, the user can choose several options from it, the problem is i have to many options and i want the user can search the option that he/she wants writing text:
<v-col cols="7">
<v-select
v-model="fillModReparacion.listamanodeObraC"
:items="fillModReparacion.listamanodeObra"
item-value="itg_id"
item-text="itg_descripcion"
attach
chips
label="Mano de Obra"
multiple
outlined
clearable
return-object
></v-select>
</v-col>
You can use v-slot:prepend-item to prepend the search before the options list inside v-select.
Live Demo :
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
searchTerm: "",
fruits: [
"Apples",
"Apricots",
"Avocado",
"Bananas",
"Blueberries",
"Blackberries",
"Dates",
"Eggplant",
"Figs",
"Grapes",
"Grapefruit",
"Guava"
],
fruitsCopy: [],
selectedFruits: []
}),
mounted() {
this.fruitsCopy = [...this.fruits];
},
computed: {},
methods: {
searchFruits(e) {
if (!this.searchTerm) {
this.fruits = this.fruitsCopy;
}
this.fruits = this.fruitsCopy.filter((fruit) => {
return fruit.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
});
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.2.21/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.2.21/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-select v-model="selectedFruits" :items="fruits" attach label="Favorite Fruits" multiple>
<template v-slot:prepend-item>
<v-list-item>
<v-list-item-content>
<v-text-field v-model="searchTerm" placeholder="Search" #input="searchFruits"></v-text-field>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
</v-select>
</v-container>
</v-app>
</div>
I'm trying to figure out how to validate inputs immediately after adding them:
template:
<div id="app">
<div
v-for="(message, index) in messages"
:key="index"
>
<v-text-field
v-model="messages[index]"
:rules="[v => !!v || 'Error: Please enter text']"
/>
</div>
<v-btn #click="add()">Add input</v-btn>
</div>
JS:
new Vue({
el: '#app',
data: {
messages: ['Hi', 'Hello'],
},
methods: {
add(val) {
this.messages.push(val);
},
},
});
Codepen: https://codepen.io/Zurab-D/pen/dymGaRY
What I mean is that when the button is clicked, a new input appears and there is no "Error: Please enter text" error message by default.
Can I make this message appear immediately?
You can put your template's code, where you use v-for directive, between v-form tags:
<v-form ref="form">
<div v-for="(message, index) in messages" :key="index">
<v-text-field v-model="messages[index]"
:rules="[v => !!v || 'Error: Please enter text']" />
</div>
<v-btn #click="add()">Add input</v-btn>
</v-form>
and then inside add() method validate form by using built-in validate() function in v-form reference
async add(val) {
this.messages.push(val);
await this.$nextTick(); // wait until a new text-field will be rendered
this.$refs.form.validate(); //validate form
},
An example on CodePen is here
To achieve this you can use this.$refs.form.validate(). Wrap your inputs inside <v-form> tag and add an attribute ref="form".
Live Demo :
new Vue({
vuetify: new Vuetify(),
data: {
messages: ['Hi', 'Hello']
},
methods: {
required: value => !!value || 'Please enter text',
add(val) {
this.messages.push(val);
setTimeout(() => {
this.$refs.form.validate();
})
}
}
}).$mount('#app')
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css"/>
<div id="app">
<v-app>
<v-form ref="form">
<div v-for="(message, index) in messages" :key="index">
<v-text-field v-model="messages[index]" :rules="[required]"/>
</div>
<v-btn #click="add()">Add input</v-btn>
</v-form>
</v-app>
</div>
I am new to vuejs and vuetify.
I was following youtube course on vuetify and he set the v-chip color in the following manner.
<v-flex xs2 sm4 md2>
<div class="right">
<v-chip
small
:class="`${project.status} white--text my-2 caption`"
>{{ project.status }}</v-chip>
</div>
</v-flex>
and style is;
.v-chip.complete {
background: #3cd1c2;
}
.v-chip.ongoing {
background: #ffaa2c;
}
.v-chip.overdue {
background: #f83e70;
}
I can see the project status text is correctly set. For some reason the color is not getting set in v-chip.
When I inspect the object I found it has following style set
v-chip v-chip--no-color theme--light v-size--small ongoing white--text my-2 caption
For some reason no-color getting set.
Can someone provide some advice on this?
You can use the :class binding directly with the data prop in vue; it can also be used in conjunction with the regular class attribute.
var app = new Vue({
el: '#app',
data: {
projects: [{
status: 'ongoing'
}, {
status: 'complete'
}, {
status: 'overdue'
}]
}
})
#chips-container .v-chip.complete {
background: #3cd1c2;
}
#chips-container .v-chip.ongoing {
background: #ffaa2c;
}
#chips-container .v-chip.overdue {
background: #f83e70;
}
<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#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-flex xs2 sm4 md2>
<div class="right" id="chips-container">
<v-chip v-for="project in projects" small :class="project.status" class="white--text my-2 caption">{{ project.status }}</v-chip>
</div>
</v-flex>
</div>
EDIT: Updated snipped to use vuetify
Simply use the tenary operator like this
<v-chip
label
outlined
pill
:color="project.status==='complete'?'green':project.status==='ongoing'?'blue':'orange'"
>
{{project.status}}</v-chip>
You can give your v-chip an id.
<v-chip id="chip" small :class="`${project.status} white--text caption my-2`">{{project.status}}</v-chip>
<style>
#chip.v-chip.complete {background: #00cc00;}
#chip.v-chip.ongoing{background: #0099ff;}
#chip.v-chip.overdue {background: #ff0000;}
</style>
You can user "active-class", api documentation
<v-flex xs2 sm4 md2>
<div class="right">
<v-chip small active-class="white--text my-2 caption">{{project.status}}</v-chip>
</div>
</v-flex>
I am trying to implement vuetify in my project. I am newbie in VueJs & vuetify too.
I am trying to use a toolbar which contains a rounded image on the right corner. But, It is not responsive. When i open developer option and decrease the screen size to that of mobile. The rounded image does not render.
I tried using plain tags but it is actually disrupting the layout.
Here is the code
VuetifyTest.vue:
<template lang="html">
<v-toolbar>
<v-toolbar-side-icon>
<!-- <v-img src="../assets/mad_logo.png" aspect-ratio="1.7"></v-img> -->
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-layout
align-center
justify-space-around
wrap
>
<v-avatar
:tile= false
size="36"
color="grey lighten-4"
>
<img src="../assets/static.jpeg" alt="avatar">
</v-avatar>
</v-layout>
</v-toolbar-items>
</v-toolbar>
</template>
<script lang="js">
export default {
name: 'VuetifyTest',
props: [],
mounted() {
},
data() {
return {
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped >
</style>
This is how it looks like in laptop screen
This is how it looks like in mobile screen
How do i change the code to make it responsive
PS: I also tried reducing the screen size while viewing here in reduced screen size.
Even though it showed like this..
Even though the official documentation have this problem?
How do i make it responsive..
thanks!
You do not have to specify v-layout within the v-toolbar - if you remove the v-layout and replace it with just the v-avatar, it works.. Examples are below:
[CodePen Mirror]
Snippet:
new Vue({ el: "#app" })
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app>
<v-toolbar>
<v-toolbar-side-icon>
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-avatar :tile=false size="36" color="grey lighten-4">
<img src="https://i.pravatar.cc/300?img=3" alt="avatar">
</v-avatar>
</v-toolbar>
</v-app>
</div>
I want to add the items in a v-select. for example, we dont have any item in a v-select and want to add it extrenaly.
<v-select
v-bind:label="Intelligence"
v-model="IntValues"
multiple >
</v-select>
When we write like this we will get only empty select list but how to add items into it externally
Here IntValues:[],
Or Editable list, like TodoMVC
new Vue({
el: '#app',
data() {
return {
selected: null,
items: []
}
},
methods: {
fetchItems() {
this.items = [
"A1",
"B2",
"C3"
]
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify#1.0.3/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-flex xs6>
<v-subheader>Standard</v-subheader>
</v-flex>
<v-flex xs6>
<v-select :items="items" v-model="selected" label="Select" single-line bottom></v-select>
</v-flex>
<div #click=fetchItems>FetchItems</div>
</v-layout>
</v-container>
</v-app>
</div>
You can modify the items later to update the value.
You can test with clicking the FetchItem to see the effect.
Watchers will do your work, add a watcher to your model and whenever it changes add value to your items.
You can refer this pen, it is using v-combobox which is having power of autocomplete.
https://codepen.io/saurabhtalreja/pen/yLMyJmE
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
select: ['Vuetify'],
items: [
'Programming',
'Design',
'Vue',
'Vuetify',
],
}
},
watch:{
select(val,prev){
console.log('New Input Value is' ,val);
console.log('Previous Value is' ,prev);
console.log('Model is = New Input ie. ', this.select);
console.log('Items Array is', this.items)
this.items.push(val);
console.log('New Items are', this.items)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.4.11/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row>
<v-col cols="12">
<v-combobox
v-model="select"
:items="items"
label="Combobox"
outlined
dense
></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
If you have data in an array variable named values, then just assign it to IntValues.
ie,
this.IntValues = values;
If you have a single object say value, then just push it to the IntValues. ie, this.IntValues.push(value).