I got a question about my vue code I'm making a filter dropdown but when I input a key to trigger the key down event for filtering the arr it's changing the dom each time after the second event (one step behind).
Here is the code pen :
https://codepen.io/dyonvangerwen/pen/zYvjMdY
it's only keeping the values in the arr that are matching the input
template:
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field
v-model="inputValue"
label="Filled"
placeholder="Placeholder"
filled
v-on:keydown="tester"
></v-text-field>
<v-card
class="mx-auto"
max-width="400"
tile
>
<v-list-ite >
<v-list-item-content v-for=" item in itemsInDropdown" :key="item">
<v-list-item-title>{{item}}</v-list-item-title>
</v-list-item-content>
</v-list-ite>
</v-card>
</v-col>
</v-row>
</v-container>
</v-form>
</v-app>
</div>
script:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
inputValue:'',
itemsInDropdown:['a','b','c','d','e','ab','cd','ea']
}),
methods:{
tester:function(){
this.itemsInDropdown = this.itemsInDropdown.filter((x)=>{
if(x.includes(this.inputValue)){
return true
}
else{return false}
})
}
}
})
It is better to use computed in this case:
Replace the method with this:
computed:{
itemsInDropdownFiltered:function(){
return this.itemsInDropdown.filter((x)=>{
return x.includes(this.inputValue);
});
}
}
Change the array to be rendered from itemsInDropdown to itemsInDropdownFiltered as follows:
<v-list-item-content v-for="item in itemsInDropdownFiltered" :key="item">
Related
I created a grid using v-for. I need to add components to each column I created, each one in seperate column. I created view in script, where I store components but still I can't add them to each column separately:
<template>
<v-container fluid>
<v-row dense>
<v-col
v-for="n in 2"
:key="n"
:cols="n === 1 ? 2 : 10">
<v-card outlined tile>
<component :is="view"></component>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import XYZ from '../views/XYZ.vue';
import AAA from '../views/AAA.vue';
export default {
name: 'Project',
data: {
view: 'dynamic_views',
},
components: {
'dynamic_views': {
XYZ,
AAA
}
},
};
</script>
Put the components directly inside the components option then create a data property called componentNames which you should loop through it :
import XYZ from '../views/XYZ.vue';
import AAA from '../views/AAA.vue';
export default {
name: 'Project',
data:{
componentNames:['XYZ','AAA']
},
components: {
XYZ,AAA
},
};
in template :
<template>
<v-container fluid>
<v-row dense>
<v-col
v-for="(comp,n) in componentNames"
:key="n"
:cols="n === 1 ? 2 : 10">
<v-card outlined tile>
<component :is="comp"></component>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
Im trying to make an infinite scroll list but it's really not lazy loading, been stuck with this for hours, the whole list will come in.
.....
<v-col
v-for="(post, i) in posts"
:key="i"
cols="12"
>
<v-lazy
v-model="isActive"
:options="{
threshold: .5
}"
transition="fade-transition"
>
{{Content here}}
</....
API used for test : https://jsonplaceholder.typicode.com/posts
There is a new virtual-scroller component, but it doesn't work with responsive content like grid rows/cols. Instead use v-lazy...
I discovered that the columns need to have defined min-height (approx. to the expected height of the cards) in order for the v-lazy intersection observer to work. Use something like a v-sheet or v-responsive to set the min-height and contain the cards.
Also bind the v-model of the v-lazy to each post (ie: post.isActive), instead of a global isActive var...
<v-col lg="3" md="4" sm="6" cols="12" v-for="(post, index) in posts">
<v-sheet min-height="250" class="fill-height" color="transparent">
<v-lazy
v-model="post.isActive" :options="{
threshold: .5
}"
class="fill-height">
<v-card class="fill-height" hover>
<v-card-text>
<v-row :key="index" #click="">
<v-col sm="10" cols="12" class="text-sm-left text-center">
#{{ (index+1) }}
<h2 v-html="post.title"></h2>
<div v-html="post.body"></div>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-lazy>
</v-sheet>
</v-col>
Demo: https://codeply.com/p/eOZKk873AJ
I can suggest another solution with v-intersect, which works perfect for me.
Sorry, the snippet may be not working as composed of my code, but the idea should be pretty clear
<template>
<v-list class="overflow-y-auto" max-height="500">
<v-list-item v-for="item in items">
{{ item.name }}
</v-list-item>
<v-skeleton-loader v-if="moreDataToAvailable" v-intersect="loadNextPage" type="list-item#5" />
</v-list>
</template>
<script lang="ts">
import Vue from 'vue'
const pageSize = 10
export default Vue.extend({
data(): any {
return {
pageLoaded: 0,
totalCount: 100,//fetch from API
items: []
}
},
computed: {
moreDataToAvailable (): boolean {
return Math.ceil(this.totalCount / pageSize) - 1 > this.pageLoaded
}
},
methods {
async loadNextPage (entries: IntersectionObserverEntry[]) {
if (entries[0].isIntersecting && this.moreDataToAvailable) {
const nextPage = this.pageLoaded + 1
const loaded = await this.loadPage(nextPage) //API call
loaded.data.forEach((item: any) => this.items.push(item))
this.totalCount = loaded.totalCount
this.pageLoaded = nextPage
}
},
}
})
</script>
My component
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone"></vue-tel-input>
</v-col>
</v-row>
</v-container>
<v-btn
color="success"
#click="submit"
>
submit
</v-btn>
</v-form>
When I click submit, I just get phone. How can I get country code too?
[Reference] https://www.npmjs.com/package/vue-tel-input-vuetify
[Codepen] https://codepen.io/positivethinking639/pen/YzzjzWK?&editable=true&editors=101
It seems like vue-tel-input provides a country-changed event. According to the docs it's even fired for the first time and it returns an object:
Object {
areaCodes: null,
dialCode: "31",
iso2: "NL",
name: "Netherlands (Nederland)",
priority: 0
}
So this event handler can be added to the component and the country code can be stored in the component as you already do for the phone value.
HTML part
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<vue-tel-input v-model="phone" v-on:country-changed="countryChanged"></vue-tel-input>
</v-col>
</v-row>
</v-container>
<v-btn
color="success"
#click="submit"
>
submit
</v-btn>
</v-form>
</v-app>
</div>
JS Part
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
phone: null,
country: null
}
},
methods: {
countryChanged(country) {
this.country = country.dialCode
},
submit() {
console.log(this.phone);
console.log(this.country);
}
}
});
Here you can see a working version:
https://codepen.io/otuzel/pen/PooBoQW?editors=1011
NOTE: I don't use Vue on daily basis so I am not sure if this the best practice to modify the data via the event handler.
<vue-tel-input v-model="phone" v-bind="bindProps"></vue-tel-input>
data() {
return {
phone: null,
bindProps:{
mode: 'international'
}
}
}
It's achievable in vue-tel-input#3.1.1 by setting prop mode: 'international', in this case, the phone number will always be converted to +123 123 123...
I'm looking for a function who can resetting my stepper made with vuetify.
the e1 is set as 0 but if I make a function who reset this value to 0, it doesn't work and the stepper set as the same screen.
It is possible to reset a stepper to default state
Find the working codepen here: https://codepen.io/chansv/pen/wvvzddP?editors=1010
<div id="app">
<v-app id="inspire">
<v-stepper v-model="step" vertical>
<v-stepper-header>
<v-stepper-step step="1" :complete="step > 1">Your Information</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="step > 2">Your Address</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3">Misc Info</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-text-field label="Name" v-model="registration.name" required></v-text-field>
<v-text-field label="Email" v-model="registration.email" required></v-text-field>
<v-btn color="primary" #click.native="step = 2">Continue</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
<v-text-field label="Street" v-model="registration.street" required></v-text-field>
<v-text-field label="City" v-model="registration.city" required></v-text-field>
<v-text-field label="State" v-model="registration.state" required></v-text-field>
<v-btn flat #click.native="step = 1">Previous</v-btn>
<v-btn color="primary" #click.native="step = 3">Continue</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-text-field label="Number of Tickets" type="number"
v-model="registration.numtickets" required></v-text-field>
<v-select label="Shirt Size" v-model="registration.shirtsize"
:items="sizes" required></v-select>
<v-btn flat #click.native="step = 2">Previous</v-btn>
<v-btn color="primary" #click.prevent="submit">Save</v-btn>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-app>
</div>
const defaultReg = Object.freeze({
name:null,
email:null,
street:null,
city:null,
state:null,
numtickets:0,
shirtsize:'XL'
});
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
step:1,
registration: Object.assign({}, defaultReg),
sizes:['S','M','L','XL']
}
},
methods:{
submit() {
this.registration = Object.assign({}, defaultReg);
this.step = 1;
}
}
})
A simpler approach at resetting your stepper is by using the key prop assigning to it a value and then in the function increasing this value. Something like this:
<template>
<v-stepper
:key="stepperKey"
v-model="e1"
>
...
</v-stepper>
</template>
<script>
export default {
data () {
return {
e1: 1,
stepperKey: 0
}
},
methods: {
increaseKey () { this.stepperKey++ }
}
}
</script>
The key prop or attribute is a build in Vue.js feature. Even if you don't see it it's been used on the back. Changing the key will trigger a re render.
If you have doubt about the key attribute/prop here is a nice article about it
I'm currently using the datepicker component in one of my projects. The component is supposed to throw an error message if I click in and out of the empty textfield of the datepicker menu. So far the error message only works if I enter a value and then remove it again.
There are already rules which check if the date-value of the textfield is longer than 0 Digits or not null.
HTML
<div id="app">
<v-app id="inspire">
<v-container grid-list-md>
<v-form v-model='validForm'>
<v-layout row wrap>
<v-flex xs12 lg6>
<v-text-field
v-model="text"
clearable
label="Regular Textfield"
:rules="rulesDatefield"
v-on="on"
></v-text-field>
<v-menu
v-model="menu1"
:close-on-content-click="false"
full-width
max-width="290"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model='date'
clearable
label="Datefield"
readonly
:rules="rulesDatefield"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
#change="menu1 = false"
></v-date-picker>
</v-menu>
</v-flex>
</v-layout>
</v-form>
<v-btn :disabled="!validForm" #click='printValues()' color='primary'>Create</v-btn>
</v-container>
</v-app>
</div>
JS
new Vue({
el: '#app',
data: () => ({
validForm: false,
text: '',
date: '',
menu1: false,
rulesDatefield: [
v => String(v).length > 0 || 'Field is empty!',
v => v !== null || 'Field is empty!'
]
}),
methods: {
printValues: function() {
window.alert('Entered Text: ' + this.text + '\nEntered Date:' + this.date)
}
}
})
Codepen: https://codepen.io/anon/pen/XLLNZM?&editable=true&editors=101
I expect an error message from the date-textfield like in the regular textfield above if I enter and exit the datepicker without selecting a date.
<v-text-field
v-model="date"
clearable
readonly
label="Datefield"
:rules="rulesDatefield"
v-on="on"
#blur="date = date || null"
></v-text-field>
Seems strange but works, as you intended.