when trying to trigger an action to take when an event occurs in the Maps Vue.js plugin for Google Charts (vue-google-charts), but the event never seems to fire. If I use another chart type the events are working properly, but not with Maps.

Below is a sample bit of code I tried - the map renders fine, but clicking on the map does not trigger the event. Any idea what I’m doing wrong?

<template>
<div class=”map”>
<h1>This is a map</h1>
<GChart
type=”Map”
:data=”chartData”
:options=”chartOptions”
:settings=”{ packages: [‘corechart’, ‘map’], mapsApiKey: ‘REDACTED’ }”
:events=”chartEvents”
/>
</div>
</template>

<script>
import { GChart } from ‘vue-google-charts’;

export default {
name: ‘map’,
components: {
GChart
},
data () {
return {

chartData: [
[‘Lat’, ‘Long’, ‘Name’],
[37.4232, -122.0853, ‘Work’],
[37.4289, -122.1697, ‘University’],
[37.6153, -122.3900, ‘Airport’],
[37.4422, -122.1731, ‘Shopping’]
],

chartOptions: {
chart: {
title: ‘A Map’,
}
},

chartEvents: {
‘click’: () => {
alert(‘click’)
}
}
}
}
}
</script>

Solution :

Found the problem after more digging. When using Maps via Google Charts the only two events that are available are “error” and “ready”. Events for click, drag, resize, etc are only available when using the Maps API directly.

when working on a firebase based vue.js app that should redirect users to home page after successfully logged in. when being howewer not directed to home view as it is supposed to be. It still hangs on login page after successfully logged in.

this.$router.replace simply doesn’t work and there is no idea why.

main.js

import vue.js from “vue”;
import firebase from “firebase”;
import App from “./App.vue”;
import router from “./router”;
import swalPlugin from ‘./plugins/VueSweetalert2’;

Vue.config.productionTip = false;

let app =’’;

firebase.initializeApp( {
apiKey: “#”,
authDomain: “#”,
databaseURL: “#”,
projectId: “#”,
storageBucket: “#”,
messagingSenderId: “#”
});

Vue.use(swalPlugin);

firebase.auth().onAuthStateChanged(() => {
if (!app) {
app = new Vue({
router,
render: h => h(App)
}).$mount(“#app”);
}
});

router.js

import firebase from ‘firebase’;
import vue.js from “vue”;
import Router from “vue-router”;
import Home from “./views/Home.vue”;
import Login from “./views/Login.vue”;
import SignUp from “./views/SignUp.vue”;

Vue.use(Router);

const router = new Router({
routes: [
{
path: ‘*‘,
redirect: ‘/login’
},
{
path: ‘/‘,
redirect: “/login”
},
{
path: ‘/login’,
name: ‘login’,
component: Login
},
{
path: ‘/sign-up’,
name: ‘signUp’,
component: SignUp
},
{
path: ‘/home’,
name: ‘home’,
component: Home,
meta: {
requiresAuth: true
}
}
]
});

router.beforeEach ((to, from, next) => {
const currentUser = firebase.auth.currentUser;
const requiresAuth = to.matched.some (record => record.meta.requiresAuth);

if (requiresAuth && !currentUser) next(‘login’);
else if (!requiresAuth && currentUser) next(‘home’);
else next();

});

export default router;

Login.vue.js view

<template>
<form autocomplete=”off”>
<div class=”login”>
<h1>Login</h1>
<p>Sign in to stay updated with the latest news</p>
<hr>

<input type=”text” placeholder=”Email” v-model=”email”>

<input type=”password” placeholder=”Enter Password” v-model=”password”>

<hr>
<button @click=”login”>Login</button>
<p>Don’t have an account yet? Create one <router-link to=”/sign-up”>here</router-link></p>

</div>
</form>
</template>

<script>
import firebase from ‘firebase’;
import Swal from ‘sweetalert2’;

export default {
name: ‘login’,
data() {
return {
email: ‘’,
password: ‘’
}
},
methods: {
login: function(){
firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
(user) => {
this.$router.replace(‘home’);
},
(err) => {
Swal.fire({
type: ‘error’,
title: ‘An error occurred…’,
text: err.message
})
}
);
}
}
}
</script>

Home.vue.js view

<template>
<div class=”home”>
<img alt=”vue.js logo” src=”../assets/logo.png” />
<HelloWorld msg=”Welcome to the Vue.js App” />
<button @click=”logout”>Logout</button>
</div>
</template>

<script>
import firebase from “firebase”;
import HelloWorld from “@/components/HelloWorld.vue”;

export default {
name: “home”,
components: {
HelloWorld
},
methods: {
logout: function(){
firebase.auth().signOut().then(() => {
this.$router.push ({name: ‘login’})
})
}
}
};
</script>

Solution :

Use router.push()

this.$router.push({name: ‘home’});

Let me know if it works!

there is a header component. i cant able to update value of header component on button click

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<my-component ref=”foo”></my-component>
</header>
<div id=”app”>
<h1>Component Test</h1>
<button v-on:click=”test”>Button</button>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var MyComponent = Vue.extend({
template: ‘<div><p>Hello</p><div v-if=”islogin”>User</div></div>’,
data: function () {
return {
islogin: false
};
}
});

var vm = new Vue({
el: ‘#app’,
components: {
‘my-component’: MyComponent
},
methods: {
test: function () {
this.$refs.foo.islogin = true;
}
}
});

</script>
</body>
</html>

to update the islogin to true on button click. Now it shows “TypeError: Cannot set property ‘islogin’ of undefined” error.

Thanks

Solution :

the component ‘my-component’ is not in the scope of Vuejs. vue.js is in the div with the id ‘app’. So you can’t add others components outside this main div

Solution 2:

Put the component inside Vuejs #app scope :

<div id=”app”>
<header>
<my-component ref=”foo”></my-component>
</header>
<h1>Component Test</h1>
<button v-on:click=”test”>Button</button>
</div>

I’m trying to put a router that is imported as a constant in main router`s children
router/components/slider/index.js:

const sliderRouter = {
path: ‘/slider’,
name: ‘Slider’,
meta: {
title: ‘Slider’
},
component: () => import(‘@/views/components/slider’),
}

export default sliderRouter

router/index.js:

…

import authRouter from ‘./modules/auth’
import sliderRouter from ‘./modules/components/slider’

…

export default new Router({
mode: ‘history’,
linkActiveClass: “active selected”,
routes: [
authRouter, // this work
{
path: ‘/admin’,
name: ‘primary’,
meta: { requiresAuth: true },
// remastered version
component: loadView(‘MainLayout’),
children: [
sliderRouter, /* make something like this */
//recent routes
{
path: ‘/home’,
name: ‘home’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// classic version:
component: () => import(/* webpackChunkName: “about” */ ‘../views/Home.vue’)
// component: About
}
]
},

Is it really possible to make the slider router work in such way and inherit from the MainLayout (like a typical child), and also URL would be ‘/admin/slider’?

Solution :

I solved it by changing the path in the slider

path: ‘/slider’,

to

path: ‘slider’,

because it is using like child route which does not require a slash before it`s name

when using semantic-ui-vue.js dropdown and the placeholder option is not working if I don’t use multiple attribute.

Here is my sandbox link .

there is placed 2 dropdowns:

Dropdown without multiple attribute - Placeholder not working
Dropdown with multiple attribute - Placeholder working

How to put placeholder in the 1st dropdown? In the same case, placeholder is working in their official documentation.

Solution :

semantic-ui-vue.js requires the v-model value to be null in order to consider it “empty”

So, if you modify the code to instead of defaulting to an empty string from: “” you default to from: null

I’m developing an app in nativescript vue.
During development, the this.$navigateTo() function stopped working.
Because I was sure, I didn’t do anything wrong, I created this example.

It doesn’t if to preview it on my phone, so when starting to think it’s my phone’s fault.
Have I done any mistakes? Does it work on the phone?
Thanks in advance!

Solution :

You can navigate only to a Page, the HelloWorld component is a Page but Next component is not. You should wrap it with Page element

when a beginner in nuxt vue.js js. I dont know how to integrate facebook login in nuxt vue.js js. there is tried with javascript sdk. but it gives error as FB is not defined when trying to login

Solution :

You can try using Nuxt Auth.

Heres the documentation part where it mentions facebook: https://auth.nuxtjs.org/reference/providers/facebook

I recommend reading the documentation from beginning, tho, as it will help you understand how Nuxt Auth works before trying to simply implement facebook auth.

I’m encountering an issue with vue-router.
I got a list of posts in the homepage. When I click on one of them, it redirects to the post page such as :

<router-link :to=”{ name: ‘article’, params: {id: article.id, slug: article.slug } }”></router-link>

Everything is working perfectly, I can retrieve the data of the correct article using this.$route.params.id in a getter.

My issue : When I reload on an article page, this.$route.params.id is undefined, which causes the entire application to crash.

How can I save the router.params despite a page reload ?

Solution :

What backend are you using? You need to enable history mode on the router, as well as make some additional configuration changes on the backend web server. Please refer to this link for the additional server side configuration changes you will need to make for this to work properly.

Also, please make note of this 404 caveat when using history mode..

Edit: you could try something like this since the ID remains persistent in the URL: Look for the solution from MIKE AXLE

I don’t know if anyone else if facing the same issue, but I was having a problem getting route params on refresh. The route parameter I was trying to get was an ID number and I use that ID to fetch data and populate the page. I found (through many console logs) when I refreshed, the number was turning into a string and thats why the page was not working. I sorted it out but casting the ID to number before using it:

Number($route.params.id)

Solution 2:

I’m not sure what is the route definition, the problem can be that only one of the params presented in the route URL (e.g. /article/:slug).

When you invoke a route (by clicking on router-link or calling router.push), you passing both params directly and they persist in the memory. That’s why both are accessible.
But when you reload the page - everything that vue.js can do is to parse the URL.
Means only one param parsed because only one param is present.

As a solution you can:

use both params in the route URL (e.g. /article/:id/:slug);
or use one param and call the API to retrieve remaining information (e.g. get id by slug if the route is /article/:slug).

there is this snippet

<b-img v-if=”validPicture” :src=”imgSrc” fluid alt></b-img>
<b-embed v-else-if=”validVideo” type=”iframe” aspect=”16by9” :src=”imgSrc” allowfullscreen></b-embed>
<p v-else >Sorry. No Image Available</p>

I would like it if the v-else “Sorry No image Available” does not do a FOUT like behavior before my image loads. v-cloak does not work for this. Any suggestions most welcome.

Updated code are:

this.validPicure = /\.bmp|\.gif|\.png|\.jpg|\.jpeg\.tiff/gim.test(
this.imgSrc
);
this.validVideo = /http/gim.test(this.imgSrc);

Computed Property:

computed: {
noImage: function() {
if (this.imgSrc === null || this.imgSrc === undefined) {
return true;
}
}

Solution :

You don’t show the logic behind validPicture and validVideo but presumably you can augment that with a noImage computed property

<b-img v-if=”validPicture” :src=”imgSrc” fluid alt />
<b-embed v-else-if=”validVideo” type=”iframe” aspect=”16by9” :src=”imgSrc” allowfullscreen />
<p v-else-if=”noImage” >Sorry. No Image Available</p>

Solution 2:

Check if is a valid picture and if the variable is not empty

<b-img v-if=”validPicture && imgSrc !== ‘’ && imgSrc !== undefined” :src=”imgSrc” fluid alt></b-img>

Same with video

<b-embed v-else-if=”validVideo && imgSrc !== ‘’ && imgSrc !== undefined” type=”iframe” aspect=”16by9” :src=”imgSrc” allowfullscreen />

there is multiple v-autocomplete component from Vuetify. Currently, for example if enter in search input “Cali” and check “California” value, “Cali” value still exist in search input. I need to clear entered value. For current, search value cleared when closing dropdown list, but I need clear it when I select checkbox.

<v-autocomplete
v-model=”select”
:loading=”loading”
:items=”items”
:search-input.sync=”search”
cache-items
class=”mx-3”
flat
hide-no-data
hide-details
label=”What state are you from?”
solo-inverted
multiple
\></v-autocomplete>

new Vue({
el: ‘#app’,
data () {
return {
loading: false,
items: [],
search: null,
select: null,
states: [
‘Alabama’,
‘Alaska’,
‘American Samoa’,
‘Arizona’,
‘Arkansas’,
‘California’,
‘Colorado’,
‘Connecticut’,
‘Delaware’,
‘District of Columbia’,
‘Federated States of Micronesia’,
‘Florida’,
‘Georgia’,
‘Guam’,
‘Hawaii’,
‘Idaho’,
‘Illinois’,
‘Indiana’,
‘Iowa’,
‘Kansas’,
‘Kentucky’,
‘Louisiana’,
‘Maine’,
‘Marshall Islands’,
‘Maryland’,
‘Massachusetts’,
‘Michigan’,
‘Minnesota’,
‘Mississippi’,
‘Missouri’,
‘Montana’,
‘Nebraska’,
‘Nevada’,
‘New Hampshire’,
‘New Jersey’,
‘New Mexico’,
‘New York’,
‘North Carolina’,
‘North Dakota’,
‘Northern Mariana Islands’,
‘Ohio’,
‘Oklahoma’,
‘Oregon’,
‘Palau’,
‘Pennsylvania’,
‘Puerto Rico’,
‘Rhode Island’,
‘South Carolina’,
‘South Dakota’,
‘Tennessee’,
‘Texas’,
‘Utah’,
‘Vermont’,
‘Virgin Island’,
‘Virginia’,
‘Washington’,
‘West Virginia’,
‘Wisconsin’,
‘Wyoming’
]
}
},
watch: {
search (val) {

val && val !== this.select && this.querySelections(val)
}
},
methods: {
querySelections (v) {

this.loading = true
// Simulated ajax query
setTimeout(() => {
this.items = this.states.filter(e => {
return (e || ‘’).toLowerCase().indexOf((v || ‘’).toLowerCase()) > -1
})
this.loading = false
}, 500)
}
}
})

to clear value in search input after selecting value in dropdown list.
Here is codepen example - https://codepen.io/anon/pen/ZZMKeL

Solution :

Add watcher for select value and reset search-input:

watch: {
select() {
this.search = ‘’
}

Or react on one of the events:
<v-autocomplete @input=”search = ‘’”
or
<v-autocomplete @change=”search = ‘’”

Watch select because of v-model value (<v-autocomplete v-model=”select”), and change
this.search because of search-input.sync value (:search-input.sync=”search”).