link2192 link2193 link2194 link2195 link2196 link2197 link2198 link2199 link2200 link2201 link2202 link2203 link2204 link2205 link2206 link2207 link2208 link2209 link2210 link2211 link2212 link2213 link2214 link2215 link2216 link2217 link2218 link2219 link2220 link2221 link2222 link2223 link2224 link2225 link2226 link2227 link2228 link2229 link2230 link2231 link2232 link2233 link2234 link2235 link2236 link2237 link2238 link2239 link2240 link2241 link2242 link2243 link2244 link2245 link2246 link2247 link2248 link2249 link2250 link2251 link2252 link2253 link2254 link2255 link2256 link2257 link2258 link2259 link2260 link2261 link2262 link2263 link2264 link2265 link2266 link2267 link2268 link2269 link2270 link2271 link2272 link2273 link2274 link2275 link2276 link2277 link2278 link2279 link2280 link2281 link2282 link2283 link2284 link2285 link2286 link2287 link2288 link2289 link2290 link2291 link2292 link2293 link2294 link2295 link2296 link2297 link2298 link2299 link2300 link2301 link2302 link2303 link2304 link2305 link2306 link2307 link2308 link2309 link2310 link2311 link2312 link2313 link2314 link2315 link2316 link2317 link2318 link2319 link2320 link2321 link2322 link2323 link2324 link2325 link2326 link2327 link2328

[Vue.js] Getting events to work with vue-google-charts on Google Charts Maps

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.

[Vue.js] Firebase auth logs in but redirect to home fails after successfully logged in (server response 200)

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!

[Vue.js] vuejs update component value on button click is not working

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>

[Vue.js] How to set vue-router nested routes like a children

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

[Vue.js] How to show placeholder in semantic-ui-vue dropdown without multiple attribute?

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

[Vue.js] Navigating doesn't work in nativescript anymore

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

[Vue.js] How to do facebook login integration in nuxt vue js

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.

[Vue.js] Losing router.params on page refresh

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).

[Vue.js] Way to prevent momentary no Image Available in vue

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 />

[Vue.js] How to clear v-autocomplete (multiple) search input after selecting the checkbox in the drop-down list?

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”).