link2329 link2330 link2331 link2332 link2333 link2334 link2335 link2336 link2337 link2338 link2339 link2340 link2341 link2342 link2343 link2344 link2345 link2346 link2347 link2348 link2349 link2350 link2351 link2352 link2353 link2354 link2355 link2356 link2357 link2358 link2359 link2360 link2361 link2362 link2363 link2364 link2365 link2366 link2367 link2368 link2369 link2370 link2371 link2372 link2373 link2374 link2375 link2376 link2377 link2378 link2379 link2380 link2381 link2382 link2383 link2384 link2385 link2386 link2387 link2388 link2389 link2390 link2391 link2392 link2393 link2394 link2395 link2396 link2397 link2398 link2399 link2400 link2401 link2402 link2403 link2404 link2405 link2406 link2407 link2408 link2409 link2410 link2411 link2412 link2413 link2414 link2415 link2416 link2417 link2418 link2419 link2420 link2421 link2422 link2423 link2424 link2425 link2426 link2427 link2428 link2429 link2430 link2431 link2432 link2433 link2434 link2435 link2436 link2437 link2438 link2439 link2440 link2441 link2442 link2443 link2444 link2445 link2446 link2447 link2448 link2449 link2450 link2451 link2452 link2453 link2454 link2455 link2456 link2457 link2458 link2459 link2460 link2461 link2462 link2463 link2464 link2465

[Vue.js] Firebase Why value event gets fired before new child ref gets added

Following code, is a very simple Firebase - VueJS app, (codeSandBox demo)

app.vue

<template>
<div class=”container”>
<!– Adding Quote –>
<add-quote/>

<!– Display Quotes –>
<quote-list/>
</div>
</template>

<script>
import addQuote from “./components/AddQuote.vue”;
import quoteList from “./components/QuoteList.vue”;

export default {
components: {
addQuote,
quoteList
},
methods: {
get_allQuotes: function() {
// var vm = this;
var localArr = [];
quotesRef
.once(“value”, function(snapshot) {
snapshot.forEach(function(snap) {
localArr.push({
key: snap.key,
category: snap.val().category,
quoteTxt: snap.val().quoteTxt
});
});
})
.then(data => {
this.$store.commit(“set_allQuotes”, localArr);
});
}
},
mounted() {
this.get_allQuotes();
console.log(“App: mounted fired”);
}
};
</script>

store.js(vuex store)

import vue.js from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export const store = new Vuex.Store({
state: {
quotesList: []
},
getters: {
get_quotesList(state) {
return state.quotesList;
}
},
mutations: {
set_allQuotes(state, value) {
state.quotesList = value;
}
}
});

AddQuote.vue

<template>
<div class=”row quote-edit-wrapper”>
<div class=”col-xs-6”>
<textarea v-model.lazy=”newQuoteTxt”
rows=”4”
cols=”50”></textarea>
<button @click=”addQuote”>Add Quote</button>
</div>
</div>
</template>

<script>

export default {
data() {
return {
newQuoteTxt: ‘’,
}
},
computed: {
allQuotes() {
return this.$store.getters.get_quotesList;
},
newQuoteIdx() {
var localArr = […this.allQuotes]

if(localArr.length > 0) {
var highestKEY, currKEY

localArr.forEach((element, idx) => {
currKEY = parseInt(element.key)
if(idx == 0) {
highestKEY = currKEY
} else {
if(highestKEY < currKEY) {
highestKEY = currKEY
}
}
})
return highestKEY + 1
} else {
return 1
}
}
},
methods: {
// ADD new Quote in DB
addQuote: function() {
var vm = this
var localArr = […this.allQuotes]

//1. First attach ‘value’ event listener,
// Snapshot will contain data from that ref
// when any child node is added/updated/delete
quotesRef.on(‘value’, function (snapshot) {
snapshot.forEach(function(snap) {
var itemExists = localArr.some(function (item, idx) {
return item.key == snap.key
})
// If newly added item doesn’t yet exists then add to local array
if (!(itemExists)) {
localArr.push({
key: snap.key,
category: snap.val().category,
quoteTxt: snap.val().quoteTxt })

vm.$store.commit(‘set_allQuotes’, localArr)
}
})
})

//2. Second set/create a new quotes in Firebase,
// When this quote gets added in Firebase,
// value event (attached earlier) gets fired
// with
var newQuoteRef = quotesRef.child(this.newQuoteIdx)
newQuoteRef.set({
category: ‘motivation’,
quoteTxt: this.newQuoteTxt
})
}
}
}
</script>

quoteList.vue

<template>
<div class=”row”>
<div class=”col-xs-12 quotes-list-wrapper”>
<template v-for=”(quote,idx) in allQuotes”>

<!– Quote block –>
<div class=”quote-block-item”>
<p class=”quote-txt”> {quote.quoteTxt} </p>
</div>
</template>
</div>
</div>
</template>

<script>
export default {
computed: {
allQuotes() {
return this.$store.getters.get_quotesList;
}
}
}

</script>

Note: The main code of concern is of addQuote.vue

User enter newQuoteTxt that gets added to Firebase (addQuote()) as a quote item under quotesRef. As soon as quote is added (on firebase), Firebase client side SDK’s value event fires, and adds the new quote (via callback) to localArray (allQuotes). VueJS then updates the DOM with newly added Quote.

The addQuote() method works in the following manner:

First, attach a callback/listener to ‘value’ event on quotesRef

quotesRef.on(‘value’, function (snapshot) {
….
})

Next, A firebase ref (child of quotesRef) is created with a ID this.newQuoteIdx

var newQuoteRef = quotesRef.child(this.newQuoteIdx)

Then set() is called (on this newly created Ref) adding newquote to firebase RealTime DB.

value event gets triggered (attached from step 1) and listener /callback is called.

The callback looks for this new quote’s key in existing list of items by matching keys of localArr and snap.key, if not found, adds the newly quote to localArr. localArr commits to a vuex store.

`vm.$store.commit(‘set_allQuotes’, localArr)`

VueX then updates all subscriber component of this array. VueJS then adds the new quote to the existing list of quotes (updates the DOM)

While debugging the addQuote method, the problem I notice, the execution/flow of script (via F8 in chrome debugger) first steps into the listener/callback attached to value event before the code newQuoteRef.set({ … }) that adds new quote (on firebase), which in turn will cause ‘value’ event to trigger.

when not sure why this occurs. Can anybuddy explain why the listener/callback is called before the quotes is created.

Are child nodes (of QuotesRef) are cached at clientside such that ‘value’ fires even before new quote is added.

Thanks

Solution :

If I correctly understand the question (the code is not extremely easy to follow! :-)) it is the normal behaviour. As explained in the documentation:

The value event will trigger once with the initial data stored at
this location, and then trigger again each time the data
changes.

the sandbox demo does not actually shows how the app works, but normally you should not set-up the listener in the method that saves a new node to the database. These two things should be decoupled.

One common approach is to set the listener in the created hook of a component (see https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks and https://vuejs.org/v2/api/#created) and then in the addQuote method you just write to the database. As soon as you write, the listener will be fired.

[Vue.js] how to automate the insertion of SVG icons via vue.js?

how to display an icon by type attr in vue.js?

HTML

<icon type=”heart”></icon>
<icon type=”heartFull”></icon>

Vue

Vue.component(‘icon’, {
data: {
type: {
heart: ‘<g stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2” fill=”#c3cad5” stroke=”#c3cad5”><path fill=”none” stroke=”#c3cad5” stroke-miterlimit=”10” d=”M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z”></path></g>’,
heartFull: ‘<g fill=”#c3cad5”><path fill=”#c3cad5” d=”M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z”></path></g>’
}
},
props: {
width: {
type: Number,
default: 24
},
height: {
type: Number,
default: 24
},
},
computed: {
viewBox() {
return ‘0 0 ‘ + this.width + ‘ ‘ + this.height
}
},
template: ‘<svg xmlns=”http://www.w3.org/2000/svg" :viewBox=”viewBox” :width=”width” :height=”height”>{ type }</svg>’,
})

Expected result

<icon type=”heart”></icon>

it turns into

<svg xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 24” width=”24” height=”24”><g stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2” fill=”#c3cad5” stroke=”#c3cad5”><path fill=”none” stroke=”#c3cad5” stroke-miterlimit=”10” d=”M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z”></path></g></svg>

or

<icon type=”heartFull”></icon>

it turns into

<svg xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 24” width=”24” height=”24”><g fill=”#c3cad5”><path fill=”#c3cad5” d=”M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z”></path></g></svg>

In this way I would create more icons over time and use them easily. Thanks!

Solution :

Well the type is not a prop but a data property. And it is an object. So right now you are inserting the whole object type from the data into svg.

Try this:

Vue.component(‘icon’, {
props: {
iconType: {
type: String,
default: “heart”
},
width: {
type: Number,
default: 24
},
height: {
type: Number,
default: 24
}
},
data() {
return {
types: {
heart:
‘<g stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2” fill=”#c3cad5” stroke=”#c3cad5”><path fill=”none” stroke=”#c3cad5” stroke-miterlimit=”10” d=”M21.243,3.757 c-2.343-2.343-6.142-2.343-8.485,0c-0.289,0.289-0.54,0.6-0.757,0.927c-0.217-0.327-0.469-0.639-0.757-0.927 c-2.343-2.343-6.142-2.343-8.485,0c-2.343,2.343-2.343,6.142,0,8.485L12,21.485l9.243-9.243C23.586,9.899,23.586,6.1,21.243,3.757z”></path></g>’,
heartFull:
‘<g fill=”#c3cad5”><path fill=”#c3cad5” d=”M21.95,3.051C20.627,1.729,18.87,1,17,1s-3.627,0.729-4.949,2.05C12.034,3.067,12.017,3.084,12,3.102 c-0.017-0.018-0.033-0.034-0.05-0.051C10.627,1.729,8.87,1,7,1S3.373,1.729,2.05,3.051S0,6.13,0,8s0.728,3.627,2.05,4.949l9.95,9.95 l9.95-9.95C23.272,11.627,24,9.87,24,8C24,6.131,23.272,4.373,21.95,3.051z”></path></g>’
}
};
},
computed: {
viewBox() {
return “0 0 “ + this.width + “ “ + this.height;
}
},
template:
‘<svg xmlns=”http://www.w3.org/2000/svg" :viewBox=”viewBox” :width=”width” :height=”height” v-html=”this.types[this.iconType]“></svg>’
};
})

<icon iconType =”heart”></icon>
<icon iconType =”heartFull”></icon>

[Vue.js] Difference from @event=doThis() & @event=doThis in Vuejs

I’ve encountered this error

Cannot read property ‘target’ of undefined

with an @click event while calling a method with a doThis().

But doThis worked fine

I would like to know what is the difference between

<button type=”button” @click=”doThis()” data-name=”test”>Test</button>

And

<button type=”button” @click=”doThis” data-name=”test”>Test</button>

with this method

methods: {
doThis(e) {
console.log(e.target.dataset.name);
}
}

Solution :

Because the e which is the event object being handled is is undefined. You have to pass the object using global $event

<button type=”button” @click=”doThis($event)” data-name=”test”>Test</button>

Usually when you invoke the event handler manually is because you need to pass additional arguments to the function. As example

<div v-for=”v in values” :key=”v.id”>
<button type=”button” @click=”doThis($event, v)” data-name=”test”>Test</button>
</div>

Solution 2:

As I was typing this up, @Chay22 was able to help - for what it’s worth, here is an example:

[CodePen Mirror]

const vm = new Vue({
el: “#app”,
data: {
title: ‘’
},
methods: {
doTheNeedful(e) {
this.title = “Coming From: “ + e.target.innerHTML;
console.log(e);
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id=”app”>
<div>
<button @click=”doTheNeedful”>doTheNeedful</button>
<button @click=”doTheNeedful($event)”>doTheNeedful($event)</button>
<div v-if=”title”>
<p>{ title }</p>
<h3>Check console for event info</h3>
</div>
</div>
</div>

[Vue.js] Pass token from API to front-end during redirect

there is a back-end in Node.js, front-end in Vue.js and a scenario like this:

API-1: Retrieves a user token and redirects to API-2. The token should be sent along API-2

API-2: Displays a web page, populated with data that depend from the token generated in API-1. The token itself should be accessed and if possibly stored in the client’s (browser’s) local storage.

So during the redirect I need to pass the token from the back-end to the client side. I would rather not send it as a query param because that would mean that anyone can see it.

API-1 content:

….
var api_2_uri = “/“;
var user_token = get_token_function(); //user token was retrieved
res.redirect(api_2_uri); //todo: send user_token along the request for redirect

API-2 (the redirected page) content:

….
<p>{username}</p>
<p>{email}</p>
<p>{telephone}</p>
<script src=”./vue_code.js”></script>
….

Vue.js code (vue_code.js):

var login_form = new Vue({
el: ‘#login_form’,
data: {
username: “”,
email: “”,
telephone: “”
},
created(){
var user_token_value = “”; //todo: here we must access the user token that was passed to the front-end app. if possible, store it in the app’s local storage
fetch(‘https://third\_party\_url?user\_token='+user\_token\_value)
.then(response => response.json())
.then(json => {
this.username = json.username;
this.email = json.email;
this.telephone = json.telephone;
})
}
})

there is searched around and for the client side the idea of keeping the token in the local storage seems like the best. However:

I don’t know how to pass it the token from the API to the view, other than pass the token along as part of the url (which I don’t like)
What would be the best way to keep the token in the server side for re-use during navigation from page to page?

I would prefer simplistic solutions, since for the scope of this code using multitudes of libraries/modules would be an overkill.

Solution :

To store data temporarily in the browser you can use local storage or session storage, in that case you can use a local-storage or sessionstorage npm

for example, to set a token in local storage :

var ls = require(‘local-storage’);

// when user signed in you give them a token

var user_token = generate_token-function();

ls.set(‘foo’, user_token);

// then to verify the token, you can use a get method

var getUserToken = ls.get(‘foo’)

// then you can verify it :

verifyToken_function(getUserToken) /* if (err) redirect the user to the login page res.redirect(‘/login’) else everything is good res.redirect(‘/profile) */

You can alos do it with AJAX request from jQuery

[Vue.js] Making a external POST is not working in my Vue code

there is a problem and I’ve been trying to fix it many days and I can’t solve it. I just want to send a hint to Google Analytics when I click one button (to do it, there is to make a request (POST).
This is my code, there is deleted the ID that there is in GA, just to show you the original code:

import vue.js from ‘vue’
import VueResource from ‘vue-resource’
Vue.use(VueResource)

handleMP () {
this.$http.post(‘www.google-analytics.comv=1&t=pageview&tid=UA-XXXXXX-
X&cid=555&dp=%2Fanalytics’)
}

The problem is that I don’t know why, when I make the POST, the URL I use it is added to http::/localhost:8080/ and I can’t make the POST.
Example URL I can see in the console:
http://localhost:8080/www.google-analytics.com?v=1&t=pageview&tid=UA-XXXXXXX-X&cid=555&dp=%2Fanalytics

How can I fix this?
Thanks in advance

Solution :

I’m pretty sure you’re missing a http:// or https:// prefix in the URL, so vue.js thinks it’s just a relative URL and appends what you entered to the current address.

Try adding the https://, so it looks like this:

handleMP () {
this.$http.post(‘https://www.google-analytics.comv=1&t=pageview&tid=UA-XXXXXX-
X&cid=555&dp=%2Fanalytics’)
}

[Vue.js] How to pass values from display to mutatuion - Vue?

How to pass values from display to mutatuion - Vue?

he return is an error indicating that the function does not exist.

Where can I be wrong?

Thank you guys

import vue.js from ‘vue’
import Vuex from ‘vuex’

import disponivel from ‘./module-disponivel’

Vue.use(Vuex)

export default function () {
const Store = new Vuex.Store({
modules: {
disponivel
}
)],
})
return Store
}

import store from ‘../store’

methods: {

},
display: function () {
store.disponivel.commit(‘ValidationSet’, true)
}

vue.js warn]: Error in render: “TypeError:
_store__WEBPACK_IMPORTED_MODULE_8__.default.disponivel is undefined”

Solution :

If you enable namespaced in the module, it should be

store.commit(‘disponivel/ValidationSet’, true)

otherwise, it should be

store.commit(‘ValidationSet’, true)

You might want to export the store as default:

export default const store = new Vuex.Store({
modules: {
disponivel
}
})

[Vue.js] Axios.get call for years as value

when trying to get a json file from server. Endpoint has a year parameter with the current year number as value like so: ?year=2019. I also need to get a year before that and next year. So if someone enters data in the backend for 2018, 2019 or 2020 I should be able to retrieve it. The problem is that I cannot hard code the years since next year I would need 2019, 2020 and 2021 and so on :)

I currently have pretty basic setup but have tried all sorts of things which of course don’t work.

data() {
return {
year:[]
}
},

computed: {
axiosParams(){
const params = new URLSearchParams();
params.append(‘year’, this.year);
return params;
}
},

getYears: function() {
axios.get(‘myurl’,{
params : this.axiosParams
}
}).then((response) => {
this.year = response.data;
})
}

If I hardcode it like year: ‘2019’ in the data, everything works ok. when new to vue.js and Axios so any help would be greatly appreciated.

Solution :

You could just use a little javascript magic to get this year or an array of the years you want like so:

year() {
var now = new Date()
var nowy = now.getFullYear()

return nowy
},

This will return 2019

years() {
var yearsArray = []
var now = new Date()
for (let i = -1; i < 2; i++) {
var nowy = now.getFullYear() + i
yearsArray.push(nowy)
}
return yearsArray
},

This will return an array like this: [2018, 2019, 2020]

Then it’s up to how you use that, you can send either this year or an array to the api.

[Vue.js] Vue not showing a object

there is a javascript function that grabs the 10 last retrieved closed websites with a chrome api, and it then simplifies the list into an array of objects with the title, and url of each website. vue.js is displaying this array of objects fine when I initialize it myself, however it does not work when trying to use the function to get the array. Why isn’t vue.js showing anything?

As previously said, there is tried initializing the array of objects myself and have had no issues with displaying it like that. However setting it up so that before the vue.js is rendered, the function to generate the array is run will still not solve the issue.

var gotLast10;

function getLast10() {
chrome.sessions.getRecentlyClosed({}, function (results){
if (results.length > 10){
results = results.slice(0, 10);
var tempLast10 = [];
results.forEach(
function(eachSite) {
var tempObject = { TITLE: eachSite.tab.title, URL: eachSite.tab.url}
tempLast10.push(tempObject);
gotLast10 = tempLast10;
}
);
}
});
console.log(gotLast10);
}

$(document).ready(
function() {
getLast10();
vm = new Vue({
el: ‘#app’,
data: {
gotLast10: gotLast10,
}
});
}
);
<div id=app>
{ gotLast10 }
</div>

I expected vue.js to display the object normally, but it just ends up displaying nothing

Solution :

Try updating the data through the vue.js instance.

vm.gotLast10 = tempLast10

Also, make sure you call getLast10() after the create the Vue.

[Vue.js] Vue Cli 3 exclude typescript file from being injected in index.html

I created a project typescript project with the vue.js Cli.

to have a separated commands.html file that should contain the javascript code from a commands.ts file.

I put the commands.html file in the public folder, so it is copied to the dist folder when building the project.

The commands.ts file is in the root folder (in the same folder in that the public, src, node_modules, etc folders are).

Webpack should do the following:

Minify the commands.html file (like it is minifying the index.html)
Compile the commands.ts file to JavaScript
Put the generated JavaScript file to the dist/js folder
Put a script tag in the commands.html file that points to the generated JavaScript file

I tried the following:

I installed html-webpack-plugin

I created a vue.config.js file with the following code:

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
configureWebpack: {
entry: {
commands: ‘./commands.ts’,
},
plugins: [
new HtmlWebpackPlugin({
filename: ‘commands.html’,
template: ‘./public/commands.html’,
chunks: [‘commands’],
minify: {
collapseWhitespace: true,
},
}),
],
},
};

That is doing everything correctly, but it also creates a script tag in the index.html file that points to the generated JavaScript file. I think the default Webpack config of vue.js is compiling the commands.ts in the bundle that is injected in the index.html file. How can I stop it from doing that?

Solution :

Found it out:

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
configureWebpack: {
entry: {
functionFile: ‘./functionFile.ts’,
},
plugins: [
new HtmlWebpackPlugin({
filename: ‘functionFile.html’,
template: ‘./public/functionFile.html’,
chunks: [‘functionFile’],
minify: {
collapseWhitespace: true,
},
}),
],
devServer: {
https: true,
},
},
chainWebpack: (config) => {
config
.plugin(‘html’)
.tap((args) => {
// eslint-disable-next-line no-param-reassign
args[0].excludeChunks = [‘functionFile’];
return args;
});
},
};

[Vue.js] Vue component is rendring but page is blank.I can see the code by inspectinng the page

i’m making static site with laravel and vue.js. I make

Route::get(‘/‘, function () {
return view(‘layouts.master’);
});

this route enter code hereto load home page and

import VueRouter from ‘vue-router’
import home from ‘./components/home.vue’
import About from ‘./components/About.vue’
import Contact from ‘./components/Contact.vue’

Vue.use(VueRouter)

const routes = [

{ path: ‘/about’, component: About },
{
path: ‘/‘,
component: home
},
{
path: ‘/contact’,
component: Contact
}

]

const router = new VueRouter({
mode: ‘history’,
routes, // short for `routes: routes`,

})

its my appp.js code. First time when page loaded on localhost:8000 the home page works fine but when i click to somme other route and come back it does not work it shows me blank page . but i can see html page by inspecting.

Solution :

It sounds like history mode is not configured correctly on the server side.

As a test, change this:

const router = new VueRouter({
mode: ‘history’,
routes, // short for `routes: routes`,

})

…to this:

const router = new VueRouter({
//mode: ‘history’,
routes, // short for `routes: routes`,

})

If it works, it means the server side is not set up properly for vue.js History Mode and you’ll need to configure the server side to allow for history mode.

Example 1
Example 2 - scroll down a little more than half way to “The Server-Side” section