link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043 link2044 link2045 link2046 link2047 link2048 link2049 link2050 link2051 link2052 link2053 link2054

[Vue.js] Vuelidate, can I inherit a custom method via mixin? Subscribe to RSS

Using Veulidate, using VueJS 2 on a project built using vue.js CLI, I’m simply trying to using a custom method for the purpose of validating a phone number. The method is coming from a global mixin located in main.js.

main.js

Vue.mixin({
methods: {
vd_phone(val) {
var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
return phonePattern.test(val) ? true : false
}
});

form.vue

validations: {
phone: {
required,
phone: this.vd_phone
}
}

Seems simple enough, right? Over and over, I get Cannot read property of ‘vd_phone’ of undefined. Tried vd_phone, this.vd_phone, this.vd_phone(), etc..

Also tried putting the method into a global methods option (instead of a mixin) and trying to access it via $root like this:

main.js

var vm = new Vue({
router, el: ‘#app’, store,
methods: {
vd_phone() {
var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
return phonePattern.test(val) ? true : false;
}
},
render: h => h(App)
});

Same problem! In my form.vue.js file I attempted accessing this method using this.$root.vd_phone, $root.vd_phone, etc.. no dice.

This is all I found on the topic: https://github.com/vuelidate/vuelidate/issues/308, but this seems to talk about inheriting entire validator properties - not just a method.

Any help is appreciated.

Solution :

You’re using a factory pattern to instantiate a function from it’s source for use in other files. To do this you must export from the source file so other files can import it, like this:

main.js

export default {
vd_phone(val) {
var phonePattern = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/;
return phonePattern.test(val) ? true : false;
}
}

Then import the file where ever you need that function, and you will have access to it.

[Vue.js] VUE Image with src doesnt show up on first rendering Subscribe to RSS

Hello i’m facing an issue on my avatar component, the image that i load from an url stocked in my vuex store doesn’t show up on the first rendering, only at the second.

here’s my avatar component

<template>
<img :src=”getAvatarUrl()”/>
</template>

<script>
export default {
methods: {
getAvatarUrl() {
return this.$store.state.user.userAvatarUrl
}
}
}
</script>

here’s how i commit the image url in my store from App.vue:

created() {
firebase.auth().onAuthStateChanged(user => {
if (user) {
let avatarRef = firebase.storage().ref().child(`avatars/${this.$store.state.user.displayName}`)
avatarRef.getDownloadURL().then(url => {
this.$store.commit(‘userAvatarUrl’, url)
})
}
})
}

This image from the avatar component doesn’t render the first time it should,
there is to navigate on another route and come back to see it.
I tried to force rerender on all lifecycle hooks with :key and use this.$nexttick but that don’t work too.
Thanks for the help

Solution :

This is because the store doesn’t contain the image path until the request has completed and the request will likely complete after the DOM and the component has rendered.

You just need to use a computed property instead:

<template>
<img :src=”avatarUrl”/>
</template>

<script>
export default {
computed: {
avatarUrl() {
return this.$store.state.user.userAvatarUrl
}
}
}
</script>

[Vue.js] On page refresh navigate to another route vuejs Subscribe to RSS

there is two pages home and about. so while refreshing home page i need to naviagate to about page. so in home.vue.js i written like this.

created () {
window.addEventListener(‘beforeunload’, this.reloadHandler)
}

destroyed () {
window.removeEventListener(‘beforeunload’, this.reloadHandler)
}

and in the reloadHandler method i written router push to about page.

reloadHandler () {
this.$nextTick(() => {
this.$router.push(‘/about’)
})
}

Is it possible to do this with vue-router. Or is there any way to achieve it.

Solution :

Due to browser security and privacy concerns, it is not possible entirely in Vue.js/client-side. It will never be foolproof.

The best solution is to use a server-side redirect to handle this situation. When a page is refreshed, the server will receive the request. When the server gets the request from /home route, then it should redirect to /about using HTTP status 302 and Location header.

Solution 2:

In the Home Component mounted hook, use

this.$router.push(‘/about’)

Let me know if it works

[Vue.js] Vue router blank page after routing from axios interceptor Subscribe to RSS

In my axios.config.js file there is this piece of code:

axios.interceptors.response.use(
config => config,
error => {
if (error && error.message === “Network Error”) {
if (router.currentRoute.name !== “login”) {
router.push({
name: “errorPage”,
query: { template: “NoConnection” }
});
}
} else if (error && error.response && error.response.status === 401) {
Vue.auth.logout().then(() => {
router.push({
name: “login”
});
});
} else if (
error &&
error.config.hasOwnProperty(“errorHandle”) &&
error.config.errorHandle === false
) {
return Promise.reject(error);
} else {
_notifyError(error);
}
return Promise.reject(error);
}
);

When i get a 401 status code, the correct code is called and the route changes to : http://localhost:8080/#/error\_page?template=UnAuthorized but the page is blank. If I refresh, I see the error page.

My route:

{
path: “/error_page”,
name: “errorPage”,
component: ErrorPage
},

Any idea?

Solution :

Try to change the router.push object to

router.push({
path: “errorPage”,
query: { template: “NoConnection” }
});

You can only use query inside a router.push object when path is specified, otherwise if you use name you must use params instead.

If this don’t work too try

router.push({
name: “errorPage”,
params: { template: “NoConnection” }
});

{
path: “/error_page/:templateName”,
name: “errorPage”,
component: ErrorPage
},

And then inside the ErrorPage get the templateName param with the $router keyword.

[Vue.js] How to sort a VueJS object in descending order of the number of occurrences? Subscribe to RSS

there is a dynamic object that consists of the number of occurrences from a user selection. The object looks like this:

{ “Excitement”: 2, “Competence”: 3, “Sophistication”: 1 }

This is the function:

rankFactors() {
const headers = this.headers;
var counts = {};
for (var i = 0; i < headers.length; i++) {
var num = headers[i];
counts[num] = counts[num] ? counts[num] + 1 : 1;
}
return counts;
}

How do I sort this object so that it is always in descending order? That way I can print it as a ‘Top 3’ list.

This is my CodeSandbox: https://codesandbox.io/embed/vue-template-mzi03

To reproduce just make selection of personality traits, with multiple options from a few headers.

Solution :

I think I’d do it something like this:

rankFactors() {
const headers = this.headers;
const counts = {};

for (const header of headers) {
counts[header] = (counts[header] || 0) + 1;
}

const factors = Object.keys(counts).map(header => {
return {
name: header,
count: counts[header]
}
});

factors.sort((a, b) => b.count - a.count);

return factors;
}

The first stage is very similar to what you had, building up an object of counts. That’s an easy data structure to work with for gathering those counts but once that stage is done it’s not a great choice for dealing with sorting. For that we’re better off with an array.

So next up it converts the object into an array of objects, each of the form {name: ‘Excitement’, count: 2}. This array is then sorted based on the counts and then returned. You could throw in a .slice(0, 3) if you just want the top 3.

[Vue.js] How to setup search option in vue/vuex based on current route Subscribe to RSS

when creating simple app using vuex and vue-router that renders movies and shows on different routes and search option for both. Movies and shows are in separate components and my search - input element is in Layout.vue.js component. I made a search option for movies through vuex that works properly and now to setup search option for shows.
Now I wonder if it’s possible to setup search option through vuex to trigger search for movies only when when on ‘/movies’ route and trigger search for shows only when when on ‘/shows’ route ?

store.js

const getters = {
filterMovies: state => {
return state.movies.filter(movie => {
return movie.title.toLowerCase().match(state.textSearch.toLowerCase())
})
},
movie: state => state.movie
};

const mutations = {
setMovies: (state, items) => (state.movies = items),
setMovie: (state, items) => (state.movie = items),
setLoading: (state, payload) => (state.loading = payload),

updateSearch: (state, payload) => (state.textSearch = payload)
};

Layout.vue

methods: {
updateSearch(e) {
this.$store.commit(‘updateSearch’, e.target.value)
}

Solution :

I’d say what you want to do is pass a parameter to the getter

getMoviesByName: state => name => state.movies.filter(x => x.title === name)

call it like this

this.$store.getters.getMoviesByName(this.$route.params.movieName)

Further what you want to do is utilise the nested routes to render the data that you need based on the route.

Solution 2:

So you can pass current route to action/mutation and then you can handle it easily.

updateSearch(e) {
const { currentRoute } = this.$router.currentRoute
this.$store.commit(‘updateSearch’, e.target.value, currentRoute)
}

[Vue.js] <v-icon> vuetify material Icon (mdi) showing problem in vuetify and nuxt app? Subscribe to RSS

when using nuxt and vuetify. all of the tags working fine. But when when using <v-icon>, the icon is not showing ..

<v-flex xs12 mb-3>
<v-btn outline fab small color=”blue-grey lighten-4”>
<v-icon color=”grey darken-4”>mdi-facebook</v-icon>
</v-btn>

<v-btn outline fab small color=”blue-grey lighten-4”>
<v-icon color=”grey darken-4”>mdi-google-plus</v-icon>
</v-btn>

<v-btn outline fab small color=”blue-grey lighten-4”>
<v-icon color=”grey darken-4”>mdi-linkedin</v-icon>
</v-btn>
</v-flex>

Solution :

Follow The Instruction..

npm install @mdi/font -D
In the nuxt app there plugins folder .. open the vuetify config file
import the package

import vue.js from ‘vue’

import Vuetify from ‘vuetify’

import ‘@mdi/font/css/materialdesignicons.css’
write the code ..

Vue.use(Vuetify, {
iconfont: ‘mdi’
})

[Vue.js] fetching the markers but lat & lng being null - vue.js Subscribe to RSS

when trying to display markers on the map. I fetched the data without a problem seeing in vue.js dev tool. Also this.markers has the data as well. But inside my lat and lng is null

when not sure the way when doing is wrong?

data(){
return {
markers: []

}
},
computed: {
articles(){
return this.$store.getters.getArticles;
}
},
watch: {
articles(){
this.buildMarkers();
this.clearMarkers();
}
},
methods: {
clearMarkers(){
for( var i = 0; i < this.markers.length; i++ ){
this.markers[i].setMap( null );
}
},
buildMarkers: function(){

this.markers = [];

for( var i = 0; i < this.articles.length; i++ ){

var position = new google.maps.LatLng(this.articles[i].lat, this.articles[i].lng);
console.log(position);

var marker = new google.maps.Marker({
position: position,
map: this.map
});

this.markers.push(marker);
}
},
},
mounted(){
this.map = new google.maps.Map(document.getElementById(‘article-map’), {
center: {lat: this.latitude, lng: this.longitude},
zoom: this.zoom
});
this.clearMarkers();
this.buildMarkers();
},

to make it more understandable this is the image of the devtool.

By the way I can see the map. Only problem is I can’t see the markers on it because lat & lng being empty.

Solution :

You have an array of markers, therefor the buildMarkers() function must have been executed, which would have added them to the map.

The map property of the marker opened up in the console has been set to null (removing it from the map), this implies that clearMarkers() has also executed.

I notice in the articles() watcher you first build then clear the markers. I think it should possibly read

articles(){
this.clearMarkers();
this.buildMarkers();
}

[Vue.js] vuejs cannot display image from assets folder Subscribe to RSS

I tried to upload an image from my asset but nothing appears. I would like the image source to match the value set in character.headImage.

data/character.js

export const character = [
{
name : ‘Super Lady’,
fullImage : ‘../assets/characters/superLadyFull.png’,
headImage : ‘../assets/characters/superLadyHead.png’,
description : ‘ ‘

}
]

charactersSelection.vue

<template>
<div>
select the characther
<div v-for=”character in characters”>
<img :src=”character.headImage”>
<p>{character.description}</p>
</div>
</div>
</template>

<script>
import {character} from “../data/Character”;

export default {
name: “CharactersSelection”,
data() {
return {
characters : character
}
}
}
</script>

<style scoped>

</style>

Solution :

Ultimately you want the image to look like this

<img src=”assets/characters/superLadyHead.png”>

Change the character image source strings to reflect the following

export const character = [
{
name : ‘Super Lady’,
fullImage : ‘assets/characters/superLadyFull.png’,
headImage : ‘assets/characters/superLadyHead.png’,
description : ‘ ‘

}
]

However, this makes some assumptions about how the page is being served.

[Vue.js] Emit variable not passing array from child to parent? Subscribe to RSS

when trying to pass an array of tags from the child component to the parent component using emit. The emit is registering and firing the method in the parent component, but when I log the argument that I passed via emit it returns undefined. when not sure what when doing wrong because there is passed objects via emit before.

there is tried trying to convert the array to an object, passing it as the this value of the same name without storing it as a variable within the method itself.

//edittagsform
<template>
<div class=”card”>
<div class=”card-body”>
<div class=”form-inputs”>
<h5>Add tags:</h5>
<tagsField v-on:incoming=”updateTagsList()”/><br>
<h5>Current tags:</h5>
<div v-if=”tags.length > 0”>
<tagsList v-for=”tag in tags” v-bind:tag=”tag”/>
</div>
<div v-else>
<p>No tags associated</p>
</div>
</div>
</div>
</div>
</template>

<script>
import tagsField from ‘./tagsField’
import tagsList from ‘./tagsList’

export default {
data: function () {
return {
tags: {
tag: this.tagList,
}
},
props: [‘tagList’],
name: ‘editTagsForm’,
methods: {
updateTagsList(newTag) {
console.log(newTag)
this.tags.push(newTag)
}
},
components: {
tagsField,
tagsList
}
}
</script>

<style scoped>
</style>

//tagsField.vue
<template>
<div class=”input-group”>
<form>
<input-tag v-model=”newTags”></input-tag><br>
<input type=”button” value=”submit” v-on:click=”addTag()” class=”btn btn-secondary btn-sm”>
</form>
</div>
</template>

<script>
export default {
data: function () {
return {
newTags: [],
}
},
methods: {
addTag() {
for(var i = 0; i <= this.newTags.length; i++){
var arr = this.newTags[i]
this.$emit(‘incoming’, {
arr
})
}
}
}
}
</script>

<style scoped>
</style>```

Solution :

<tagsField v-on:incoming=”updateTagsList()”/>

Should be

<tagsField v-on:incoming=”updateTagsList”/>

When you have the parentheses, then the method will be called as is, without, it acts as a delegate and the parameters will flow through to the method.

Solution 2:

//tagsField
<template>
<div class=”input-group”>
<form>
<input-tag v-model=”newTags”></input-tag><br>
<input type=”button” value=”submit” v-on:click=”addTag()” class=”btn btn-secondary btn-sm”>
</form>
</div>
</template>

<script>
export default {
data: function () {
return {
newTags: [],
}
},
methods: {
addTag() {
const newTags = this.newTags;
this.$emit(‘incoming’, newTags)
this.newTags = []
}
}
}
</script>

<style scoped>
</style>

//edittagsform
<template>
<div class=”card”>
<div class=”card-body”>
<div class=”form-inputs”>
<h5>Add tags:</h5>
<tagsField v-on:incoming=”updateTagsList”/><br>
<h5>Current tags:</h5>
<div v-if=”tags.length > 0”>
<tagsList v-for=”tag in tags” v-bind:tag=”tag”/>
</div>
<div v-else>
<p>No tags associated</p>
</div>
</div>
</div>
</div>
</template>

<script>
import tagsField from ‘./tagsField’
import tagsList from ‘./tagsList’

export default {
data: function () {
return {
tags: this.tagList
}
},
props: [‘tagList’],
name: ‘editTagsForm’,
methods: {
updateTagsList(newTags) {
console.log(newTags)
for(var i = 0; i < newTags.length; i++) {
console.log(i)
this.tags.push(newTags[i])
}
}
},
components: {
tagsField,
tagsList
}
}
</script>

<style scoped>
</style>