link2740 link2741 link2742 link2743 link2744 link2745 link2746 link2747 link2748 link2749 link2750 link2751 link2752 link2753 link2754 link2755 link2756 link2757 link2758 link2759 link2760 link2761 link2762 link2763 link2764 link2765 link2766 link2767 link2768 link2769 link2770 link2771 link2772 link2773 link2774 link2775 link2776 link2777 link2778 link2779 link2780 link2781 link2782 link2783 link2784 link2785 link2786 link2787 link2788 link2789 link2790 link2791 link2792 link2793 link2794 link2795 link2796 link2797 link2798 link2799 link2800 link2801 link2802 link2803 link2804 link2805 link2806 link2807 link2808 link2809 link2810 link2811 link2812 link2813 link2814 link2815 link2816 link2817 link2818 link2819 link2820 link2821 link2822 link2823 link2824 link2825 link2826 link2827 link2828 link2829 link2830 link2831 link2832 link2833 link2834 link2835 link2836 link2837 link2838 link2839 link2840 link2841 link2842 link2843 link2844 link2845 link2846 link2847 link2848 link2849 link2850 link2851 link2852 link2853 link2854 link2855 link2856 link2857 link2858 link2859 link2860 link2861 link2862 link2863 link2864 link2865 link2866 link2867 link2868 link2869 link2870 link2871 link2872 link2873 link2874 link2875 link2876

[Vue.js] Custom classes for v-b-tooltip Subscribe to RSS

to create different versions of bootstrap tooltips, green red etc.
So from what when reading on the https://bootstrap-vue.js.org/docs/components/tooltip/ I need to define a container element and then style accordingly,

there is tried :container=”tooltip-container” and :container=”‘tooltip-container’” but none works, when tracing the dom and my tooltip has no parent div with id tooltip-container.

<template>
<span>
<span id=”tooltip-container” class=”tooltip-green”>
</span>
<i v-b-tooltip
class=”btr bt-info-circle text-secondary”
triggers=”hover click”
:title=”text”
:container=”‘tooltip-container’”></i>
</span>
</template>

Solution :

To render the tooltip to that span you would use:

<i v-b-tooltip=”{container: ‘#tooltip-container’}”

As far as I’m aware only the title can be specified using a separate attribute. For the other configuration options you either need to use directive modifiers (such as v-b-tooltip.hover.click) or pass a value to the directive (such as v-b-tooltip=”{trigger: ‘hover click’}”.

[Vue.js] Is possible to integrate Auth0 to Firebase like this way? Subscribe to RSS

when building an app in VueJs and when looking for the best way to do the authentication part, there is an API in progress as well that will need token verification for protected end points.
I would like to know if is possible to integrate Auth0 to Firebase in a way that Firebase is the main center of communication between the VueJs app and Auth0 (the same thing with the API -> Firebase -> Auth0).

when asking this because I would like to know exactly if I can save some lines of code and performance using Firebase tools to get what I need from Auth0 without connecting directly to Auth0 API. Also I would like to use Fire Store to save the tokens I get from Auth0.

is possible to have this kind of architecture?

Here is a diagram for a better understanding of the wished result, hope is not confusing.
https://ibb.co/68tpw8L

Thank you!

These links are the closest solutions I found thru Google.
But according with the info I found you can do this but using Auth0 as my main gateway but all the contrary, using Firebase as the main gateway.

https://firebase.google.com/docs/auth/web/custom-auth#before-you-begin
https://auth0.com/docs/api/authentication#delegation
https://firebase.google.com/docs/web/setup
https://auth0.com/blog/developing-real-time-apps-with-firebase-and-firestore/

Solution :

Auth0 has deprecated the /delegation endpoint which is used to get the token for third party vender.
https://auth0.com/docs/migrations#api-authorization-with-third-party-vendor-apis

As a workaround, use the firebase custom token authentication mechanism. https://firebase.google.com/docs/auth/admin/create-custom-tokens
https://firebase.google.com/docs/reference/js/firebase.auth.Auth.html#signinwithcustomtoken

To create a custom token, you can use the firebase function if you do not have a backend server.

The entire flow is described in the following auth0 blogs with a complete project.

https://auth0.com/blog/how-to-authenticate-firebase-and-angular-with-auth0-part-1/

https://auth0.com/blog/how-to-authenticate-firebase-and-angular-with-auth0-part-2/

[Vue.js] Vue computed property overwriting global state without vuex Subscribe to RSS

there is a list of people who have scores. In state there is them listed in an array, one of the items in the array is ‘scoreHistory’ which is an array of objects containing their scores at different points in time. to filter this set for different time periods i.e. -5 days, -30 days so instead of just seeing the overall score I can see the scores if everyone started at 0 say 30 days ago.

there is it (kind of) working. See my code below:

filteredScores () {
if(!this.people) {
return
}
// Here I was trying to ensure there was a copy of the array created in order to not change the original array. I thought that might have been the problem.
let allPeople = this.people.slice(0) // this.people comes from another computed property with a simple getter. Returns an array.

let timeWindow = 30 //days
const windowStart = moment().subtract(timeWindow,’days’).toDate()

for (const p of allPeople ) {
let filteredScores = inf.scoreHistory.filter(score => moment(score.date.toDate()).isSameOrAfter(windowStart,’day’))

p.scoreHistory=filteredScores
//calculate new score
p.score = inf.scoreHistory.reduce(function(sum,item) {
return sum + item.voteScore
},0)
}
return allInf
}

I expected it to return to me a new array where each person’s score is summed up over the designated time period. It seems to do that OK. The problem is that it is altering the state that this.people reads from which is the overall data set. So once it filters all that data is gone. I don’t know how when altering global state without using vuex??

Any help is greatly appreciated.

Solution :

the problem isn’t that you’re modifying the array, but that you’re modifying the objects within the array. You change the scoreHistory and score property of each item in the array. What you want to do instead is create a new array (I recommend using map) where each item is a copy of the existing item plus a new score property.

filteredScores () {
if(!this.people) {
return
}

let timeWindow = 30 //days
const windowStart = moment().subtract(timeWindow,’days’).toDate()

return this.people.map(p => {
let filteredScores = p.scoreHistory.filter(score => moment(score.date.toDate()).isSameOrAfter(windowStart,’day’))

//calculate new score
let score = filteredScores.reduce(function(sum, item) {
return sum + item.voteScore
}, 0)

// Create a new object containing all the properties of p and adding score
return {
…p,
score
}
}
})

[Vue.js] ERROR Error Cannot find module '@xtuc/long' Subscribe to RSS

when learning vueJs, there is installed my project using CLI and by project has successfully installed, the problem come when i need to run my project via terminal with a command npm run serve, below is the error that occur after running the command

$ npm run serve

\> school@0.1.0 serve C:\Users\Mr chomvu\Documents\vueproject\school
\> vue-cli-service serve

INFO Starting development server…
ERROR Error: Cannot find module ‘@xtuc/long’
Error: Cannot find module ‘@xtuc/long’
at Function.Module._resolveFilename
(internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\Mr
chomvu\Documents\vueproject\school\node_modules\@webassemblyjs\wast-
printer\lib\index.js:10:36)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js
(internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! school@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the school@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mr chomvu\AppData\Roaming\npm-cache\_logs\2019-
06-08T13_11_37_227Z-debug.log

I do expect after successfully compilation to have a local:
https://localhost:8080

there is attached the error image:

Solution :

If you don’t make any changes in project, just you trying to install and run the first vue.js app then follow this guide Creating a Project CLI, and everything will be fine.
Be sure you using the latest version of node & npm.

If you want to fix this project try remove node_modules and the package-lock.json file, and than run npm install

[Vue.js] Changes on imported JS files with Vue CLI project trigger page reload Subscribe to RSS

When I make changes to any function .js file under ./src/fn hot reload is not working and triggers a page reload.

there is been trying to make configure vue.config.js to include the directory to HMR correctly. Also I tried using my custom helpers as a Vue.use(myPlugin).

/* functions.js (just a part of it) */
export const Functions = {
game: {
helper: helpers,
turn: turn,
ui: ui,
validate: validate,
card: cards
},
}

/* main.js */
import Functions from ‘./functions.js’;
Vue.prototype.$myFn = Functions;

Expected HMR to work but instead get a full page reload when making changes to functions.js (or any underlying js file imported in functions.js)

Solution :

Adding the own objects and functions to the vue.js prototype is a bit of an anti-pattern. In this case, Webpack can’t determine the extent of the changes made so it falls back to a page reload. This is because ES modules can be statically analysed whereas global objects cannot be.

Here’s some articles about static analysis:

Static Program Analysis
ES Modules in Depth

Remove the functions from the vue.js protoype and always use ES modules to structure the functions. Then you can import them into other modules or components without using the legacy style global hack approach of yesteryear.

[Vue.js] How do I use Vue-draggable and Vuex to dynamically split up one list into multiple lists? Subscribe to RSS

there is an array that takes input from the user from answering multiple questions. These values are stored in my vuex store and the results are displayed on screen in a draggable list.

computed: {
allValues() {
const val1 = this.responses1
const val2 = this.responses2
const val3 = this.responses3
const val4 = this.responses4
const val5 = this.responses5
const val6 = this.responses6
const val7 = this.responses7
const coreValues = val1.concat(val2,val3,val4,val5,val6,val7)
this.$store.dispatch(‘corevalues/loadCoreValues’, coreValues)
return this.$store.getters[‘corevalues/getCoreValues’]
}
}

Draggable List

<draggable :v-model=”allValues”
options:=’group: “allValues”‘>
<transition-group>
<div v-for=”val in allValues” :key=”val.value”>
{val.value}
</div>
</transition-group>
</draggable>

{ allValues }

However, on screen although I can drag and sort the values - they do not reorder in the Vuex Store, only on-screen.

1) I need them to re-order in the store.

2) Although a single array is created through the user input I require users to be able to drag values into a second or even a third column in order to group them.

How do I make it so my on screen changes are reflected in the store - even in a new array - and so that my list can be split up into multiple columns?

This my my Code Sandbox: https://codesandbox.io/embed/vue-template-j53g3

EDIT: After Sabee response

there is implemented the following code:

watch:{
allValues: {
handler: function(newValue) {
console.log(‘here’, newValue)
this.$store.dispatch(“corevalues/loadCoreValues”, newValue);
}
},
deep: true // deep watching changes
},

But as the image below shows - the arary { allValues } is still in the same order even though it has been re-arranged on screen.

2nd edit

Updated code as advised.

Console is logging ‘Drag Ended’ but as the screenshot below shows the Core Values in the store has not updated - this is after ‘reloading state’ via dev tools.

Solution :

You can use

watch:{
list: {
handler: function(newValue) {
// do the job

// this.$store.commit(“updateList”, value);
// commit the changes to store
}

},
deep: true // deep watching changes
}

}

for checking changes and re-orders, also good solution create a button for saving user changes to store.

UPDATE
So drag changes not wathed :( …
But there are events in vue-draggable @end

On drag end you can store sorted array in vuex store

<draggable :v-model=”allValues” @end=”onEnd”>
<transition-group>
<div v-for=”val in allValues” :key=”val.value”>{val.value}</div>
</transition-group>
</draggable>

And in methods

methods: {
onEnd(){
console.log(“Drag ended”)
this.$store.dispatch(“corevalues/loadCoreValues”, this.allValues);
},

Finally

<script>
import draggable from “vuedraggable”;
export default {
components: {
draggable
},
data() {
return {
num: 1,
allValues:[],
responses1: [],
responses2: [],
responses3: [],
responses4: [],
responses5: [],
responses6: [],
responses7: [],
question: [
{
id: 1,
question: “What do you believe defines the culture at the company?”
},
{
id: 2,
question:
“What values do you bring to the work that you consistently uphold whether or not they are rewarded?”
},
{
id: 3,
question:
“What do you truly stand for in the work? What do you believe the company truly stands for?”
},
{
id: 4,
question:
“What do the customers believe about you? What do they believe you stand for?”
},
{
id: 5,
question:
“What values does the company consistently adhere to in the face of obstacles?”
},
{
id: 6,
question: “What are the companys greatest strengths?”
},
{
id: 7,
question:
“What are the top three to five most important behaviours you should expect from every employee (including you)?”
}
]
};
},
computed: {
number(number) {
return this.number + number;
},
// allValues: {
// // get() {
// // const val1 = this.responses1;
// // const val2 = this.responses2;
// // const val3 = this.responses3;
// // const val4 = this.responses4;
// // const val5 = this.responses5;
// // const val6 = this.responses6;
// // const val7 = this.responses7;
// // const coreValues = val1.concat(val2, val3, val4, val5, val6, val7);
// // // this.$store.dispatch(“corevalues/loadCoreValues”, coreValues);
// // // return this.$store.getters[“corevalues/getCoreValues”];
// // return coreValues;
// // },
// }
},
watch: {
responses1: {
handler: function(newValue) {
console.log(newValue)
this.appendWithoutDublicates(this.responses1)
},
deep: true // deep watching changes if you need
},
// responses from 2 to 7: {
// handler: function(newValue) {
// console.log(newValue)
// this.appendWithoutDublicates(this.responses1)
// },
// deep: true // deep watching changes if you need
// },
allValues: {
handler: function(newValue) {
console.log(newValue)
this.$store.dispatch(“corevalues/loadCoreValues”, newValue);
},
deep: true // deep watching changes if you need
},

},
methods: {
appendWithoutDublicates(values){
this.allValues = this.allValues.concat(values.filter(item => {
return this.allValues.findIndex(obj => obj.value === item.value) < 0;
}));
},
onEnd() {
console.log(“Drag ended”);
console.log(this.allValues);
this.$store.dispatch(“corevalues/loadCoreValues”, this.allValues);
},
setValues() {
// this.allValues = coreValues
},
questionNumber(num) {
this.num += num;
},
addresponse1: function() {
var elem = document.createElement(“tr”);
this.responses1.push({
value: “”
});
},
removeElement1: function(index) {
this.responses1.splice(index, 1);
},
addresponse2: function() {
var elem = document.createElement(“tr”);
this.responses2.push({
value: “”
});
},
removeElement2: function(index) {
this.responses2.splice(index, 1);
},
addresponse3: function() {
var elem = document.createElement(“tr”);
this.responses3.push({
value: “”
});
},
removeElement3: function(index) {
this.responses3.splice(index, 1);
},
addresponse4: function() {
var elem = document.createElement(“tr”);
this.responses4.push({
value: “”
});
},
removeElement4: function(index) {
this.responses4.splice(index, 1);
},
addresponse5: function() {
var elem = document.createElement(“tr”);
this.responses5.push({
value: “”
});
},
removeElement5: function(index) {
this.responses5.splice(index, 1);
},
addresponse6: function() {
var elem = document.createElement(“tr”);
this.responses6.push({
value: “”
});
},
removeElement6: function(index) {
this.responses6.splice(index, 1);
},
addresponse7: function() {
var elem = document.createElement(“tr”);
this.responses7.push({
value: “”
});
},
removeElement7: function(index) {
this.responses7.splice(index, 1);
}
}
};
</script>

And update draggable also

<draggable :list=”allValues” @end=”onEnd”>
<transition-group>
<div v-for=”val in allValues” :key=”val.value”>{val.value}</div>
</transition-group>
</draggable>

[Vue.js] Resetting latitude and longitude does not create map Subscribe to RSS

I’m trying to build a vue.js google map component using google maps and the plugin https://www.npmjs.com/package/vue2-google-maps. there is installed the plugin using npm , and I’ve got in working when my googleMap.vue.js component:

<template>
<div>

<v-container row fill-height justify-center style=”max-width: 1200px” >

<v-flex>

<span style=”display:block”>
<GmapMap

:center=”{lat:10, lng:10}”
:zoom=”7”
map-type-id=”terrain”
style=”width: 500px; height: 300px”
\>
<!– <GmapMarker
:key=”index”
v-for=”(m, index) in markers”
:position=”m.position”
:clickable=”true”
:draggable=”true”
@click=”center=m.position”
/> –>
</GmapMap>
</span>
</v-flex>
</v-container>
</div>

</template>

<script>

var latitute = 1030.08674842
var longitude = -97.29304982

export default {
// name:’myMap’
latitute,
longitude

}

</script>

<style>

</style>

Where it shows a map of Nigeria. there is a map I would like to display with this component:

https://www.google.com/maps/@30.086753,-97.2952385,17z

I took the lat and long above and substituted in in so it looks like the screenshot, with the controls but no map:

:center=”{lat:1030.08674842, lng:-97.29304982}”

I’ve checked my console at :

https://console.cloud.google.com/google/maps-apis/apis/maps-backend.googleapis.com/metrics

all the requests today have 200 status codes

What am I doing wrong?

Solution :

Please Check latitude value you are using

{lat:1030.08674842, lng:-97.29304982}

I think you are using wrong Latitude value.

[Vue.js] Can I push objects into Vue component data? Wanting to make a table after js filtering/manipulation Subscribe to RSS

to make a table. Actually, when making a website with many pages with many tables, so I wanted to make a table component. The table data has not yet been put into the table because I need to manipulate the data a lot in js.

When js is done with it, I intended to push every row object into the data property of my vue.js Component (to then do a v-for in the html to fill the table).

but I cant find anyone pushing data into vue.js components. Are the examples right under my nose?

if I don’t push into components themselves, that means I need to push into the parent vm? which means a new data property per table instance ..?

when really struggling putting together the bigger picture connection when it comes to connecting vue.js with the outputs from js… Looking for any input

Solution :

Pushing data into a vue.js component is not a good practice. You would have a lot easier time if you use Vuex for what you’re trying to do. Then you could build a closed-loop data system that updates state data in Vuex with mutations and returns the update to component with a getter. Doing all of this within component is possible if you initialize the data property correctly, though.

To actually answer the question, though, you would do it like this:

data () {
return {
myData: [],
someDataObject: null
}
}

methods: {
fillData () {
this.myData.push(this.someDataObject);
}
}

And in template:


<div v-for(item in myData, index) :key:item item:item>
<input type:’text’ v-model=”someDataObject”>
<button @click=”fillData();”></button>
<p>{myData[0]}</p>
</div>

[Vue.js] How to run a Vue JS build in development mode (Using Vue UI) Subscribe to RSS

when trying to deploy my vue.js app in development mode. When I click on the vue.js Chrome extension indicator it says:

Vue.js is detected on this page. Devtools inspection is not available because it’s in production mode or explicitly disabled by the author

When I run the build task in vue.js UI it defaults to production. How do I switch this to development?

Solution :

I found the answer.

In vue.js UI in the build section click the “Parameters” button next to the green build button.

This opens up the Parameters dialog, were one of the options is Specifiy env mode Switch this to “development” and then run build

[Vue.js] Can't use cookies in Store.js file Subscribe to RSS

when trying to change the use of localStorage to cookies because i need to work with subdomains. When i use this.$cookie.set() or get() in any .vue.js file i can use with no problem but when i use in any .js file i get the following:

TypeError: Cannot read property ‘set’ of undefined.

when using vue-cookie btw.

here is my store.js file:

import vue.js from “vue”;
import Vuex from “vuex”;
import axios from “./axios-auth.js”;
import globalAxios from “axios”;
import router from “./router”;
import VueCookie from ‘vue-cookie’;
Vue.use(VueCookie)
Vue.use(Vuex);

export default new Vuex.Store({
state: {
token: null,
userId: null,
expireIn: null,
segmentoSelecionado: null,
codigoTransfSelecionado: null
},
actions: {
login({ commit }, authData) {
axios
.post(“/auth”, {
username: authData.username,
password: authData.password,
returnSecureToken: true
})
.then(res => {
const now = new Date().getTime();
const expirationDate = new Date(now + 3500000).getTime();
this.$cookie.set(‘userToken’, res.data.token, {domain: ‘subdomain.domain.com’});
commit(“authUser”, {
userToken: this.$cookie.get(‘userToken’),
});
.catch(error => console.log(error));
},

Solution :

How it looks to me

Vue.use(VueCookie) : extends the vue.js object, adding the $cookie functionality

Vuex does not inherit from Vue, so will not have the $cookie functionality

Try using the $cookie on the vue.js object, not the Vuex one:

Vue.$cookie.set(‘userToken’, res.data.token, {domain: ‘subdomain.domain.com’});