link0 link1 link2 link3 link4 link5 link6 link7 link8 link9 link10 link11 link12 link13 link14 link15 link16 link17 link18 link19 link20 link21 link22 link23 link24 link25 link26 link27 link28 link29 link30 link31 link32 link33 link34 link35 link36 link37 link38 link39 link40 link41 link42 link43 link44 link45 link46 link47 link48 link49 link50 link51 link52 link53 link54 link55 link56 link57 link58 link59 link60 link61 link62 link63 link64 link65 link66 link67 link68 link69 link70 link71 link72 link73 link74 link75 link76 link77 link78 link79 link80 link81 link82 link83 link84 link85 link86 link87 link88 link89 link90 link91 link92 link93 link94 link95 link96 link97 link98 link99 link100 link101 link102 link103 link104 link105 link106 link107 link108 link109 link110 link111 link112 link113 link114 link115 link116 link117 link118 link119 link120 link121 link122 link123 link124 link125 link126 link127 link128 link129 link130 link131 link132 link133 link134 link135 link136

[Vue.js] Using the Rich Text Component in Vue

So I wanna use the Rich Text Component like described in the Docs:

https://prismic.io/docs/vuejs/templating/rich-text

So my HTML in that specific part that causes the Error looks like this:

<template v-if=”slice.slice_type === ‘text’”>
<div>
<prismic-rich-text :field=”slice.primary.text”/>
</div>
</template>

Now on Page Reload the correct HTML rendered shows up but after like 0.5s it disappears and I get the following Errors in the Console:

Now I do not know how to get those Errors away. Specially the 2 in the middle.

Solution :

The error is most probably been thrown because you are passing the Object that is missing necessary names. Try to check the props before passing them:

<template v-if=”slice.slice_type === ‘text’”>
<div v-if=”slice.primary && slice.primary.text” >
<prismic-rich-text :field=”slice.primary.text”/>
</div>
</template>

Hope this helps

[Vue.js] How do I use navigation guards in Vue.js?

there is reused my component in Vue.js, and tried to use ‘beforeRouteEnter’ navigation guard to update my data fields inside that component. But the component is not updating. Should there is used another navigation guard?

beforeRouteEnter (to, from, next) {
this.getServices()
next()
},
methods: {
getServices() {
axios.get(‘/service’).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}

Solution :

beforeRouteEnter doesn’t have access to this. You would have to use a function that is defined outside of the object scope and call the function before next. The argument passed to next is the the vue.js component object so that you can set the properties of the component.

Something like this will work:

beforeRouteEnter (to, from, next) {
axios.get(‘/service’).then(res => {
next(vm => {
vm.res = res
})
}).catch(err => {
next(vm => {
vm.err = err
})
})
}

[Vue.js] Passing data from child to parent to parent in Vue.js with method $emit()

I can’t pass data from child to parent routers with vue.js.

From few research, including on stack overflow, it is very clear that we must use the $emit() method from the child.
I played around between the documentation, stackoverflow and some youtube tutorials but there is still something I miss and I do wrong.

Below is my router Menubar.vue

<template>
<div id=”app” class=”container-fluid”>
<div>
<child @clicked=”onClickChild”></child>
</div>
<p>login is set to { loggedin }</p>
<p>Route query login { this.$route.query.loggedin }</p>
<div v-if=”!loggedin”>
<nav>
<!–<router-link class=”btn btn-primary” to=”/“>Customers</router-link>–>
<router-link class=”btn btn-primary” to= “/menubar/login”>Login</router-link>
<router-link class=”btn btn-primary” to=”/menubar/register”>Register</router-link>
</nav>
</div>
<div v-else>
<nav>
<!–<router-link class=”btn btn-primary” to=”/“>Customers</router-link>–>
<button class=”btn btn-primary” v-on:click=”logout()”>Logout</button>
<router-link class=”btn btn-primary” to=”/edit”>Edit</router-link>
</nav>
</div>

<br/>
<router-view/>
</div>
</template>

<script>
export default {
name: “menubar”,
data(){
return{
loggedin:false,
}
},
created() {
if(this.$route.query.loggedin){
this.loggedin = this.$route.query.loggedin;
}
},
methods: {
logout(){
this.loggedin = false;
},
onClickChild (value) {
this.loggedin = value;
console.log(value) // someValue
}
}
}
</script>

And its child Login.vue

<template>
<div class=”submitform”>
<div class=”form-group”>
<label for=”username”>Username</label>
<input type=”text” class=”form-control” id=”username” required v-model=”user.username” name=”username”>
</div>

<div class=”form-group”>
<label for=”password”>Password</label>
<input type=”password” class=”form-control” id=”password” required v-model=”user.password” name=”password”>
</div>

<button v-on:click=”logUser()” class=”btn btn-success”>Connect</button>
</template>

<script>
import router from ‘../../router’

export default {
name: “login”,
data(){
return{
user: {
id: 0,
username: “”,
password: “”
},
}
},
methods:{
logUser(){
var loggedin = true;
this.$emit(‘clicked’, loggedin);
router.push({ name: “menubar” });
}
}
}
</script>

my router.js

{
path: “/menubar”,
name: “menubar”,
component: Menubar,
children: [
{
path: “/menubar/login”,
name: “login”,
component: Login,
},
{
path: “/menubar/register”,
name: “register”,
component: Register,
}
]
}

the console.log should print true or false to give track my params ‘loggedin’
Instead, no idea if this is linked, there is this:
[HMR] Waiting for update signal from WDS…

which gives in my mozilla browser (same in Chrome):

The address wasnt understood
Firefox doesnt know how to open this address, because one of the following > protocols (view-source, webpack) isnt associated with any program or is not allowed in this context.
You might need to install other software to open this address.”

Thanks in advance for the help.

Solution :

From the code, it looks like the child component is emitting the event correctly to the parent. For the error you are receiving in the browser, it’s likely to be a typo or a bad URL, as you are doing:

path: “/menubar”,
name: “menubar”,
component: Menubar,
children: [
{
path: “/menubar/login”,

Which will produce a path like /menubar/menubar/login which looks wrong. https://router.vuejs.org/guide/essentials/nested-routes.html

[Vue.js] variable is assigned a value but never used when declaring it in Vue data object and using it in a method

I’m getting an error in the webpack cmd window when I run npm run dev on a project.

Here is the code and the error message that I get specifically, the code related to the parent top-level vue.js component, which has the navbar in that has details that change depending on if the user is logged in:

The code

<script>
// import required components
import EventBus from ‘./components/EventBus’
import router from ‘./router/index.js’
import jwtDecode from ‘jwt-decode’

export default {
data () {
const token = localStorage.usertoken
const decoded = jwtDecode(token)
return {
first_name: ‘’,
surname: ‘’,
email: ‘’,
created: ‘’
}

return {
auth: false
}

try {
this.login()
} catch (error) {
console.log(‘Not currently signed in’)
}
},

methods: {
logout () {
this.first_name = ‘’
this.surname = ‘’
this.email = ‘’
this.created = ‘’
localStorage.removeItem(‘usertoken’)
this.auth = false
router.push({
name: ‘login’
})
},

login () {
this.first_name = this.decoded.f_name
this.surname = this.decoded.s_name
this.email = this.decoded.email
this.created = this.decoded.created
}
},

mounted () {
EventBus.$on(‘logged-in’, status => {
this.auth = status
this.login()
})
}
}
</script>

And the error message

http://eslint.org/docs/rules/no-unused-vars ‘decoded’ is assigned a value but never used
src\App.vue:60:11
const decoded = null

To me, it looks like decoded is used in login(), any ideas?

Solution :

you need to change in the data method

As the data is a function and what gets exposed is return value. you need to return decoded from data()in order to use decoded in the login method.

data () {
const token = localStorage.usertoken
const decoded = jwtDecode(token)
return {
first_name: ‘’,
surname: ‘’,
email: ‘’,
created: ‘’,
decoded: decoded
}

[Vue.js] How can I make a selective hover in Vue Js?

a hover button to only style the nested elements inside it.
Currently in my code hovering over a single button will style the nested elements inside all its sibling buttons.

Any suggestions?

<div id=”app”>
<button
v-on:mouseover=”isHovering = true”
v-on:mouseout=”isHovering = false”>Button 1
</button>
<p v-bind:class=”{hovering: isHovering}”>
{ isHovering ? “Yes” : “No” }
</p>
<button
v-on:mouseover=”isHovering = true”
v-on:mouseout=”isHovering = false”>Button 2
</button>
<p v-bind:class=”{hovering: isHovering}”>
{ isHovering ? “Yes” : “No” }
</p>
</div>

const app = new Vue({
el: “#app”,
data: {
isHovering: false
}
})

.hovering {
display: red;
}

Solution :

In the current code you only have 1 data property “isHovering”, and both of the elements use it to conditionally use the .hovering {display: red}.

You could create another data property for the second button. If you are going to have a lot of buttons trying to do this, the code will get out of hand quite quickly.

<button
v-on:mouseover=”isSecondButtonHovering = true”
v-on:mouseout=”isSecondButtonHovering = false”>Button 2
</button>
<p :class=”{hovering: isSecondButtonHovering}”>
{ isSecondButtonHovering ? “Yes” : “No” }
</p>

Solution 2:

If you are only concerned with styling, you can succeed with pure css using the :hover selector.

Example for the use case:

button:hover + p {
background-color: red;
}

a hover button to only style the nested elements inside it.

This is not true, the p tags are not inside the button tags (even though you indented the code as such).

[Vue.js] Vue.js watch DOM element property outside components / app

there is a vue.js component nested in a regular website.

I would like to watch from the component if a DOM element is clicked outside of this component. this is just a regular HTML element NOT in a vue.js component

I can’t use v-on. I also tried a regular event listener but that does not work either because it cannot access the component’s property…

Is there a way to do this ?

Solution :

Simply add an event listener in mounted() of the component. Here’s a fiddle I put together: https://jsfiddle.net/2kwjvtun/

[Vue.js] v-date-picker Not Displaying the Date in Input Box on Edit

v-date-picker is working fine to create and read a record. The problem is edit. The input box does not populate with the value in the console. Any ideas?

<v-date-picker
v-model=’Machine.mfg_date’
</v-date-picker>

data: function() {
return {
Machine:[],
}
}
mounted() {
axios.get(‘/Machine/‘ + this.$route.params.id).then(response=>this.Machine=response.data);

}

Solution :

One problem is that you are binding the v-model to a property which is at first undefined, i.e. Machine.mfg-date, so it will never be able to react to changes.

Instead of using this.Machine=response.data you can use this.$set(this.Machine, ‘mfg_date’, response.data) to make it reactive. Vue.set reference. Also, Machine should be an object and not an array (from what I understand).

[Vue.js] Vue JS computed property not available yet when component renders

when building a page using vue.js JS. Within the vue.js instance there is a computed property that builds an array of map points, and then a vue.js component in the page that uses the computed property calculated in the root instance.

However the computed property is not available yet at the time the component is rendered,which throws an error on the computed property: “error during evaluation”

If I comment out the vue.js component, the computed property calculates correctly.

However with the component added, the computed property is not yet available, and I receive the following error: “Cannot read property of undefined”

<google-map class=”google-map” :markers=”points”></google-map>

window.vue.js = require(‘vue’);

import Vuetify from ‘vuetify’;

Vue.use(Vuetify);

import { crudFunctionsMixin } from ‘./mixin-crud-functions.js’;

Vue.component(‘google-map’, require(‘../GoogleMaps/GoogleMap’).default);

var app = new Vue({
el: ‘#App’,
mixins: [ crudFunctionsMixin ],
data: () => ({
model: “prospect”,
modelName: “Prospect”,
modelNamePlural: “Prospects”,
pagination: {
sortBy: ‘name’
},
headers: [
{ text: ‘ID’, value: ‘id’, sortable: true },
{ text: ‘Name’, value: ‘name’, sortable: true },
{ text: ‘Food Category’, value: ‘foodcat_id’, sortable: true },
{ text: ‘Contact’, value: ‘contact_lname’, sortable: true },
{ text: ‘Admin Comments’, value: ‘response_notes’, sortable: true },
{ sortable: false }
]
}),
computed: {
tblFilteredItems: function() {
return this.$refs.prospectsTable.filteredItems;
},
points: function() {
return this.calcPoints(this.$refs.prospectsTable.filteredItems);
}
},
methods: {
calcPoints(items) {
let myPts = [];

items.forEach(function(prospect) {
if(prospect.latitude && prospect.longitude) {
myPts.push({
id: prospect.id,
position: {
lat: prospect.latitude,
lng: prospect.longitude
},
title: prospect.address + “, “ + prospect.city + “, “ + prospect.zip,
icon: “\/img\/numberedMapIcons\/number_“ + prospect.id + “.png”
});
}
});

return myPts;
},

fetch() {
$.get(`/${this.model}/fetch`, (r) => {
if(r.successMsg) {
this.collection = r.collection.data;
}
});
}
}
});
app.fetch();

Solution :

A couple of things you could try:

1: Use a v-if to conditionally render the map if you have data.

`<google-map v-if=”points.length” :markers=”points” class=”google-map” />`

You could use a v-else then to render a loading symbol of some kind.

2: In the computed you can check if you have data already, as I guess this where the undefined problem is coming from.

points: function() {
if (!this.$refs.prospectTable.filteredItems) return [];
return this.calcPoints(this.$refs.prospectsTable.filteredItems);
}

[Vue.js] Vuetify data table slow for large number of objects

there is a custom object with a computed property…

class MyObject {
get someComputedProp() {
// expensive computation based on some other props
}
}

and a vuetify data-table that contains ~500 of these objects

<v-data-table
:headers=”headers”
:items=”myObjects”
:search=”search”
\>
<template slot=”items” slot-scope=”{ item }”>
<td>{ item.someComputedProp }</td>

The data table is very slow to load. Experimenting, I found that my expensive getter is called about 4x per object in the entire table. If I replace the code for my expensive getter with returning a string literal, my table is fast. This brings up some questions:

Why is the getter called so many times per row?
The table has pagination, even if my getter must be called 4 times per row, why must it be called for every row, even those that are not on the current page?
I can have my object cache the expensive computation…

get someComputedProp() {
if (!this._cachedComputedProp)
this._cachedComputedProp = // expensive computation based on some other props
}
return this._cachedComputedProp
}

which will make 3 out of the 4 calls cheap, but on another vue, I need the computed prop to update live as the props it depends on are updated. Now I’m stuck doing this silliness…

set propThatComputedPropDependsOn (value) {
this._cachedComputedProp = null
this._propThatComputedPropDependsOn = value
}

How do I get out of this mess?

Solution :

Well, maybe this will be useful to someone else:

I can’t figure out why the getters are called so many times
I can’t figure out why the data table builds everything in the dom, even stuff the user may never page to
I fixed my objects to (sometimes) cache expensive computation.

// in constructor
this.cacheProps = true

get someComputedProp() {
if (!this._cachedComputedProp || !this.cacheProps)
this._cachedComputedProp = // expensive computation based on some other props
}
return this._cachedComputedProp
}

In my editors, when the computed prop to be responsive, I set cacheProps to false on the object being edited.

[Vue.js] variable is populating in vue function but not in template

Fetching data from json data in vue.js function. Then trying to return that in my vue.js template. It is not returning anything on the template. But in console the variable is showing desired data. For some reason the variable is not working only on the template.
there is used this same method to fetch and show data in other places, it worked perfectly. But here is not.
It is not even showing any javascript error.

Here is my template:

<div>
<ul>
<li v-for=”feed in feeds” v-bind:key=”feed.id”>
<h3>{feed.title}</h3>
<p>{feed.body}</p>
</li>
</ul>
</div>

Here is the script:

export default {
data(){
return {
feeds: []
}
},
created(){
this.fetchFeeds();
},
methods:{
fetchFeeds(page_url){
let vm = this;
page_url= page_url ||’feeds/api’
fetch(page_url)
.then(res => res.json())
.then(res =>{
this.feeds = res.data;
console.log(this.feeds); //this showing data in console

})
.catch(err => console.log(err));
}
}
}

Solution :

It is the matter of the scope changing this object.
When you call fetch() this does not refer to VueJs this object anymore.
Just use the vm variable to which you assigned this object.

export default {
data(){
return {
feeds: []
}
},
created(){
this.fetchFeeds();
},
methods:{
fetchFeeds(page_url){
let vm = this;
page_url= page_url ||’feeds/api’
fetch(page_url)
// .then(res => res.json())
.then(function(res){
vm.feeds = res.data;
console.log(vm.feeds); //this showing data in console

})
.catch(err => console.log(err));
}
}
}