[Vue.js] How to pass dynamic mouse-scroll value as a prop in VueJS

when using Laravel - VueJS framework.

to detect a Y position of the mouse-scroll and pass it dynamically as a prop to a component Navbar. For this, I created an eventListener and stored the window.scrollY value to a variable scrollPos inside data(). After this I pass scrollPos as a prop to the Navbar component use v-bind:scrollPos=”scrollPos”. Unfortunately, the value that’s passed in the Navbar component is just 0, and does not change on any further mouse scrolling.

mounted() {

console.log(‘Component mounted.’);
window.addEventListener(‘scroll’, function(e) {
this.scrollPos = window.scrollY;
console.log(this.scrollPos);
});

},
data() {
return {
scrollPos: 0
}
},
methods: {
changeScrollPos() {
console.log(‘Mouse scrolled’);
}
}

I pass the value into the Navbar component, where I simply want to display this value in the navigation bar, that is fixed to the top of the page and that has router-links that scroll to that section of the page when clicked.

<nav class=”nav” id=”nav”>
<div class=”nav-content>
<ul class=”nav-items”>
<li class=”nav-item”><router-link to=”/“ v-scroll-to=”‘#section1’”>{ scrollPos }</router-link></li>
</ul>
</div>
</nav>

I also tried to use v-on:scroll=”this.changeScrollPos()” method to check whether this method is accessed after any changes in mouse scroll, but it does not.

Can someone explain why this does not work and help me out in passing dynamic mouse scroll values to the Navbar component.

Edit: This is similar to Watch window.scrollY changes in Vuejs but not the issue in this problem is already resolved and I can extract the value of mouse-scroll and display it, my issue is to pass this value to the component and when this value changes, the value passed to the component should also change (Dynamic value getting passed real-time, based on the mouse-scroll).

Solution :

As Slim pointed out, I converted my function into an arrow function and now it works. I still didn’t understand why this change made it work, would be really helpful if someone explains it.

mounted() {
window.addEventListener(‘scroll, () => { this.scrollPos = window.scrollY; });
}

[Vue.js] How i can change date format in vue.js

How i can change date format to be like this : 26-october 22:01:12

Running with Laravel and vue.js

I expect the output 2019-03-26 08:29:23

Solution :

I suggest you use the library moment.js for that purpose.

import moment from ‘moment’

moment(‘2019-03-26 08:29:23’).format(‘DD-MMMM HH:mm:ss’) // outputs 26-March 08:29:23

[Vue.js] OrderBy not working for ascending but works for descending

when making a vue.js Webapp and need to sort data ascending or descending.
As per the code, everything should work fine

template

<div class=”dropdown-menu dropdown-menu-right” aria-labelledby=”dropdownMenuButton”>
<h6 class=”dropdown-header”>Ascending</h6>
<div class=”dropdown-divider”></div>
<a @click=”order(‘name’,’asc’)” class=”dropdown-item” href=”#”>Category</a>
<a @click=”order(‘catName’,’asc’)” class=”dropdown-item” href=”#”>Category</a>
<a @click=”order(‘subcatName’,’asc’)” class=”dropdown-item” href=”#”>SubCategory</a>
<a @click=”order(‘cocatName’,’asc’)” class=”dropdown-item” href=”#”>CoCategory</a>
<a @click=”order(‘uploadedAt’,’asc’)” class=”dropdown-item” href=”#”>Uploaded At</a>
<div class=”dropdown-divider”></div>
<h6 class=”dropdown-header”>Descending</h6>
<div class=”dropdown-divider”></div>
<a @click=”order(‘name’,’desc’)” class=”dropdown-item” href=”#”>Category</a>
<a @click=”order(‘catName’,’desc’)” class=”dropdown-item” href=”#”>Category</a>
<a @click=”order(‘subcatName’,’desc’)” class=”dropdown-item” href=”#”>SubCategory</a>
<a @click=”order(‘cocatName’,’desc’)” class=”dropdown-item” href=”#”>CoCategory</a>
<a @click=”order(‘uploadedAt’,’desc’)” class=”dropdown-item” href=”#”>Uploaded At</a>
</div>

Order method

order(On, Way) {
this.loading = true;
//
let newArray = [];
this.orderItems = On;
this.orderWay = Way;

if ((this.orderWay = “desc”)) {
newArray = _.orderBy(this.items, this.orderItems, “desc”);
} else {
newArray = _.orderBy(this.items, this.orderItems, “asc”);
}

this.items = newArray;

this.loading = false;
}

Descending works perfectly fine.
But, in ascending too, it sort Z to A which is same as descending.
Can someone tell, Why and how to solve this?

Solution :

the this.orderWay = “desc” is not a valid comparison. Remember to use === to compare two variables.

this.orderWay === “desc”

Solution 2:

You can shorten the code by:

order(On, Way) {
this.loading = true;

this.orderItems = On;
this.orderWay = Way;

this.items = _.orderBy(this.items, On, Way);

this.loading = false;
}

[Vue.js] vee validate works for the first field only?

there is created two modals (loginModal and registerModal), where a user can switch between them dynamically.

There is an issue with the “VeeValidate” plugin, it’s only validating the first field if I added something to the error bag.

there is created a demo for the problem here:
https://2o2z51km00.codesandbox.io/
Source:
https://codesandbox.io/s/2o2z51km00

Open loginModal (it will open by default).
Submit the default login info (you will see a “you have entered invalid
credentials” message).
Switch to register modal after seeing that message.
Submit register modal (with empty inputs)

As you can see, it highlight the first field only (full name field) while ignoring other fields.

Why does that happen?

Solution :

After a lot of time spent, and not aware of recent changes in the later versions from 2.1 til 2.2.3.

The problem was having multiple modals trying to use the same names. This can be fixed by using scopes as i’ve implemented in a fork to the project.

https://codesandbox.io/s/vv0jqprpj0

So by adding too the input:

data-vv-scope=”SCOPE”

And using this to validate the fields

this.$validator.validate(‘SCOPE.*‘)

A side note to this is that you were using v-show on the RegisterModal to show errors and v-if on the LoginModal - The correct is to use v-if

[Vue.js] Pass parms to v-dialog instead route

I’m changing a part of my vue-application. Instead of open a new tab I like to solve that issue with a v-dialog.

At the moment, I route the id to the component like that:

menuActions(option, project) {
switch (option) {
case ‘Edit’:
this.$router.push({ name: ‘ManageProject’, params: { id: project.id }, query: ‘vue’ });
break;

Now I’d like to open that component in a dialog, but I don’t know how to pass the id

case ‘Edit1’:
this.showDialog = true;
break;

Is anyone able to help me?

Solution :

You can create an object, store necessary information(s) in the component you are using that dialog, and you will have access to that everywhere including dialog. There is no need to explicitly pass some value to v-dialog as it is part of some component.

Solution 2:

you can recover the param with : {$route.params.id}

https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

[Vue.js] Hijicking a key combination in vue

when trying to capture shift+8 on my keyboard

v-on:keyup.shift.56.prevent=”dosomething”

It calls the method fine but also outputs the standard symbol *. Can I stop the output from displaying this?

Solution :

v-on:keydown.shift.56.capture.prevent.stop=”dosomething”

Seem like preventing on keydown before the key is rendered on screen works. Obvious really.

[Vue.js] Is there a way to get and ref two or more local json file using vue and axios

when using vue.js to prototype some html components. Is there a way to get vue.js to recognize two json files?

vue.js

var vm = new Vue({
el: ‘#douglas-laing’,
data: {
products: [],
contentPanels: []
},

created() {
axios
.get( `products.json`, `contentPanel.json`)
.then(response => {
// JSON responses are automatically parsed.
this.products = response.data;
this.contentPanels = response.data;
})
},

computed: {

}, // end computed

methods: { }

});

in the html

<template v-for=”contentPanel in contentPanels”>
{ contentPanel.description }
</template>

in the json file

[
{
“description”: “this is a content panel test”,
}
]

Solution :

You can do that with axios.all(), something like:

methods: {
getProducts() {
return axios.get(‘/products.json’);
},
getContentPanel() {
return axios.get(‘/contentPanel.json’);
}
},
created(){
axios.all([this.getProducts(), this.getContentPanel()])
.then(axios.spread(function (products, contentPanel) {
// Do something with the values
}));
}

Solution 2:

got it

created() {
axios
.get( products.json)
.then(response => {
// JSON responses are automatically parsed.
this.products = response.data;
})
axios
.get( contentPanel.json)
.then(response => {
// JSON responses are automatically parsed.
this.contentPanels = response.data;
})
},

[Vue.js] Multiple Checkbox Filtering to Narrow Down a Search

Thank you to Khalid Ali for helping me so far up to this point.

So there is an array of songs that have descriptions, keywords etc. there is a number of checkboxes that I would like to use to refine a search. Basically, if someone selects the Pop checkbox it will show all songs with the genre “pop”. However, if I also select Epic Trailers, it returns all songs with “pop” AND all songs with “epictrailers” in their genre. What I would like is for it to return songs with both genres only. For example - genre: “pop, epictrailers”,

In the array below you’ll see that song 2 and song 3 both have “dramatic” in moods. But song 2 also has “tense” and song 3 also has “soaring”. So if I check the Dramatic and Soaring checkboxes I should only see song 3. At the moment both songs show because both songs have “dramatic”.

So in short, it to return only songs that include ALL checked boxes.

I hope this makes sense…

HTML SNIPPETS:

<div class=’filterboxes’>
<div class=”genres”><h1>GENRES</h1><br>
<input type=”checkbox” id=”rock” key=”genre” value=”rock” v-model=”checkboxFilter”>
<label for=”rock”>Rock</label><br>
<input type=”checkbox” id=”Pop” key=”genre” value=”pop” v-model=”checkboxFilter”>
<label for=”Pop”>Pop</label><br>
<input type=”checkbox” id=”funk” key=”genre” value=”funk” v-model=”checkboxFilter”>
<label for=”funk”>Funk</label><br>
<input type=”checkbox” id=”Jazz” key=”genre” value=”jazz” v-model=”checkboxFilter”>
<label for=”Jazz”>Jazz</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Dubstep” key=”genre” value=”dubstep” v-model=”checkboxFilter”>
<label for=”Dubstep”>Dubstep</label><br>
<input type=”checkbox” id=”Classical” key=”genre” value=”classical” v-model=”checkboxFilter”>
<label for=”Classical”>Classical</label><br>
<input type=”checkbox” id=”Country” key=”genre” value=”country” v-model=”checkboxFilter”>
<label for=”Country”>Country</label><br>
<input type=”checkbox” id=”Blues” key=”genre” value=”blues” v-model=”checkboxFilter”>
<label for=”Blues”>Blues</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Hip Hop” key=”genre” value=”hiphop” v-model=”checkboxFilter”>
<label for=”Hip Hop”>Hip Hop</label><br>
<input type=”checkbox” id=”Orchestral” key=”genre” value=”orchestral” v-model=”checkboxFilter”>
<label for=”Orchestral”>Orchestral</label><br>
<input type=”checkbox” id=”Epic Trailer” key=”genre” value=”epictrailer” v-model=”checkboxFilter”>
<label for=”Epic Trailer”>Epic Trailer</label><br>
<input type=”checkbox” id=”EDM” key=”genre” value=”edm” v-model=”checkboxFilter”>
<label for=”EDM”>EDM</label><br>
</div>
<div class=”genres”><h1>MOODS</h1><br>
<input type=”checkbox” id=”Melancholy” key=”moods” value=”melancholy” v-model=”checkboxFilter”>
<label for=”Melancholy”>Melancholy</label><br>
<input type=”checkbox” id=”Upbeat” key=”moods” value=”upbeat” v-model=”checkboxFilter”>
<label for=”Upbeat”>Upbeat</label><br>
<input type=”checkbox” id=”Playful” key=”moods” value=”playful” v-model=”checkboxFilter”>
<label for=”Playful”>Playful</label><br>
<input type=”checkbox” id=”Hopeful” key=”moods” value=”hopeful” v-model=”checkboxFilter”>
<label for=”Hopeful”>Hopeful</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Dramatic” key=”moods” value=”dramatic” v-model=”checkboxFilter”>
<label for=”Dramatic”>Dramatic</label><br>
<input type=”checkbox” id=”Disturbing” key=”moods” value=”disturbing” v-model=”checkboxFilter”>
<label for=”Disturbing”>Disturbing</label><br>
<input type=”checkbox” id=”Uplifting” key=”moods” value=”uplifting” v-model=”checkboxFilter”>
<label for=”Uplifting”>Uplifting</label><br>
<input type=”checkbox” id=”Tense” key=”moods” value=”tense” v-model=”checkboxFilter”>
<label for=”Tense”>Tense</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Crazy” key=”moods” value=”crazy” v-model=”checkboxFilter”>
<label for=”Crazy”>Crazy</label><br>
<input type=”checkbox” id=”Funny” key=”moods” value=”funny” v-model=”checkboxFilter”>
<label for=”Funny”>Funny</label><br>
<input type=”checkbox” id=”Soaring” key=”moods” value=”soaring” v-model=”checkboxFilter”>
<label for=”Soaring”>Soaring</label><br>
<input type=”checkbox” id=”Childish” key=”moods” value=”childish” v-model=”checkboxFilter”>
<label for=”Childish”>Childish</label><br>
</div>
<div class=”genres”><h1>TEMPO</h1><br>
<input type=”checkbox” id=”vfast” key=”tempo” value=”vfast” v-model=”checkboxFilter”>
<label for=”vfast”>Very Fast</label><br>
<input type=”checkbox” id=”fast” key=”tempo” value=”fast” v-model=”checkboxFilter”>
<label for=”fast”>Fast</label><br>
<input type=”checkbox” id=”moderate” key=”tempo” value=”moderate” v-model=”checkboxFilter”>
<label for=”moderate”>Moderate</label><br>
<input type=”checkbox” id=”slow” key=”tempo” value=”slow” v-model=”checkboxFilter”>
<label for=”slow”>Slow</label><br>
</div>
<div class=”genres”><h1>THEMES</h1><br>
<input type=”checkbox” id=”Corporate” key=”theme” value=”corporate” v-model=”checkboxFilter”>
<label for=”Corporate”>Corporate</label><br>
<input type=”checkbox” id=”Technology” key=”theme” value=”technology” v-model=”checkboxFilter”>
<label for=”Technology”>Technology</label><br>
<input type=”checkbox” id=”Food” key=”theme” value=”food” v-model=”checkboxFilter”>
<label for=”Food”>Food</label><br>
<input type=”checkbox” id=”Education” key=”theme” value=”education” v-model=”checkboxFilter”>
<label for=”Education”>Education</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Travel” key=”theme” value=”travel” v-model=”checkboxFilter”>
<label for=”Travel”>Travel</label><br>
<input type=”checkbox” id=”Sport” key=”theme” value=”sport” v-model=”checkboxFilter”>
<label for=”Sport”>Sport</label><br>
<input type=”checkbox” id=”Fashion” key=”theme” value=”fashion” v-model=”checkboxFilter”>
<label for=”Fashion”>Fashion</label><br>
<input type=”checkbox” id=”Landscape” key=”theme” value=”landscape” v-model=”checkboxFilter”>
<label for=”Landscape”>Landscape</label><br>
</div>
</div>

<template v-for=’song in filteredSongs’>
<div class=”songlayout” >
<div class=’wrapper’>
<div>
<img :src=”song.cover_art_url” alt=”” class=’img-fluid rounded’>
</div>
<button class=”button_7” @click=’openLicense(song.license_url)’>License</button>
<h1 class=’song-title’>{song.title}</h1>
<p class=”song-description” >{song.description}</p>

JS SNIPPET:

new Vue({
el: ‘#app’,
data: {
songs: [
{
id: 1,
title: “Track 1”,
description: “Description 1”,
url:”./mp3/track1.mp3”,
keywords: “achievement, advertising, background, beautiful, beauty, business, business music, commercial, company, confident, corporate, corporate background, corporate presentation, corporate presentations music, corporate video, corporation, corporative, happy”,
genre:”pop, rock”,
moods:”uplifting, upbeat, playful”,
tempo:”moderate”,
theme:”corporate”,
},

{
id: 2,
title: “Track 2”,
description: “Description 2”,
url:”./mp3/track2.mp3”,
keywords: “scary, horror, Armageddon, Big Ending, Dramatic, End Of The World, Escape, Fantasy, Film, Film Score, Foreboding, Haunted House, Haunting, Nervous, Nightmare, Pensive”,
genre:”epictrailer”,
moods:”tense, dramatic, disturbing”,
tempo:”moderate”,
theme:”landscape”,
},
{
id: 3,
title: “Track 3”,
description: “Description 3”,
url: “./mp3/track3.mp3”,
keywords:”Armageddon, Battle, Big Ending, Bomb, Break Out, Busy, Chase, Chilled, Covert Ops, Detective,”,
genre:”epictrailer”,
moods:”dramatic, soaring, hopeful”,
tempo:”moderate”,
theme:”sport”,
},
],

search: “”,
checkboxFilter: [],
},
computed: {
filteredSongs: function(value, key){
let fltrdSongs;
if(this.checkboxFilter.length > 0) {
fltrdSongs = this.songs.filter((song) => {
let length = this.checkboxFilter.length;
while(length–){
if ((song.genre + song.moods + song.theme + song.tempo).indexOf(this.checkboxFilter[length])!=-1)
{return true;}

}
});
} else {
fltrdSongs = this.songs;
}

return fltrdSongs.filter((song) => {
return song.keywords.toLowerCase().match(this.search.toLowerCase()) ||
song.title.toLowerCase().match(this.search.toLowerCase()) ||
song.description.toLowerCase().match(this.search.toLowerCase())
});
},},

Solution :

the filteredSongs computed property never reaches the this.checkboxFilter.length if statement because of the return statement before it.

Replace the filteredSongs computed property with the following one:

filteredSongs: function(value, key){
let fltrdSongs;
if(this.checkboxFilter.length > 0)
fltrdSongs = this.songs.filter((song) => (song.genre)
.includes(this.checkboxFilter.toString()));
else
fltrdSongs = this.songs;

In response to jeanpegg’s comment

Use the following computed property to filter the songs by multiple checkboxes:

filteredSongs: function(value, key){
let fltrdSongs;
if(this.checkboxFilter.length > 0) {
fltrdSongs = this.songs.filter((song) => {
let length = this.checkboxFilter.length;
while(length–){
if ((song.genre).indexOf(this.checkboxFilter[length])!=-1) {
return true;
}
}
});
} else {
fltrdSongs = this.songs;
}

In response to jeanpegg’s comment

I’ve edit the code to work with the genre and moods.

HTML: changing v-model=”checkboxFilter” to v-model=”checkboxFilter.genre” and v-model=”checkboxFilter.moods”

JS: changing the checkboxFilter data property to checkboxFilter: {genre: [], moods: []}. Also changed the filteredSongs computed property

<div class=’filterboxes’>
<div class=”genres”><h1>GENRES</h1><br>
<input type=”checkbox” id=”rock” key=”genre” value=”rock” v-model=”checkboxFilter.genre”>
<label for=”rock”>Rock</label><br>
<input type=”checkbox” id=”Pop” key=”genre” value=”pop” v-model=”checkboxFilter.genre”>
<label for=”Pop”>Pop</label><br>
<input type=”checkbox” id=”funk” key=”genre” value=”funk” v-model=”checkboxFilter.genre”>
<label for=”funk”>Funk</label><br>
<input type=”checkbox” id=”Jazz” key=”genre” value=”jazz” v-model=”checkboxFilter.genre”>
<label for=”Jazz”>Jazz</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Dubstep” key=”genre” value=”dubstep” v-model=”checkboxFilter.genre”>
<label for=”Dubstep”>Dubstep</label><br>
<input type=”checkbox” id=”Classical” key=”genre” value=”classical” v-model=”checkboxFilter.genre”>
<label for=”Classical”>Classical</label><br>
<input type=”checkbox” id=”Country” key=”genre” value=”country” v-model=”checkboxFilter.genre”>
<label for=”Country”>Country</label><br>
<input type=”checkbox” id=”Blues” key=”genre” value=”blues” v-model=”checkboxFilter.genre”>
<label for=”Blues”>Blues</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Hip Hop” key=”genre” value=”hiphop” v-model=”checkboxFilter.genre”>
<label for=”Hip Hop”>Hip Hop</label><br>
<input type=”checkbox” id=”Orchestral” key=”genre” value=”orchestral” v-model=”checkboxFilter.genre”>
<label for=”Orchestral”>Orchestral</label><br>
<input type=”checkbox” id=”Epic Trailer” key=”genre” value=”epictrailer” v-model=”checkboxFilter.genre”>
<label for=”Epic Trailer”>Epic Trailer</label><br>
<input type=”checkbox” id=”EDM” key=”genre” value=”edm” v-model=”checkboxFilter.genre”>
<label for=”EDM”>EDM</label><br>
</div>
<div class=”genres”><h1>MOODS</h1><br>
<input type=”checkbox” id=”Melancholy” key=”moods” value=”melancholy” v-model=”checkboxFilter.moods”>
<label for=”Melancholy”>Melancholy</label><br>
<input type=”checkbox” id=”Upbeat” key=”moods” value=”upbeat” v-model=”checkboxFilter.moods”>
<label for=”Upbeat”>Upbeat</label><br>
<input type=”checkbox” id=”Playful” key=”moods” value=”playful” v-model=”checkboxFilter.moods”>
<label for=”Playful”>Playful</label><br>
<input type=”checkbox” id=”Hopeful” key=”moods” value=”hopeful” v-model=”checkboxFilter.moods”>
<label for=”Hopeful”>Hopeful</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Dramatic” key=”moods” value=”dramatic” v-model=”checkboxFilter.moods”>
<label for=”Dramatic”>Dramatic</label><br>
<input type=”checkbox” id=”Disturbing” key=”moods” value=”disturbing” v-model=”checkboxFilter.moods”>
<label for=”Disturbing”>Disturbing</label><br>
<input type=”checkbox” id=”Uplifting” key=”moods” value=”uplifting” v-model=”checkboxFilter.moods”>
<label for=”Uplifting”>Uplifting</label><br>
<input type=”checkbox” id=”Tense” key=”moods” value=”tense” v-model=”checkboxFilter.moods”>
<label for=”Tense”>Tense</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Crazy” key=”moods” value=”crazy” v-model=”checkboxFilter.moods”>
<label for=”Crazy”>Crazy</label><br>
<input type=”checkbox” id=”Funny” key=”moods” value=”funny” v-model=”checkboxFilter.moods”>
<label for=”Funny”>Funny</label><br>
<input type=”checkbox” id=”Soaring” key=”moods” value=”soaring” v-model=”checkboxFilter.moods”>
<label for=”Soaring”>Soaring</label><br>
<input type=”checkbox” id=”Childish” key=”moods” value=”childish” v-model=”checkboxFilter.moods”>
<label for=”Childish”>Childish</label><br>
</div>
<div class=”genres”><h1>TEMPO</h1><br>
<input type=”checkbox” id=”vfast” key=”tempo” value=”vfast” v-model=”checkboxFilter”>
<label for=”vfast”>Very Fast</label><br>
<input type=”checkbox” id=”fast” key=”tempo” value=”fast” v-model=”checkboxFilter”>
<label for=”fast”>Fast</label><br>
<input type=”checkbox” id=”moderate” key=”tempo” value=”moderate” v-model=”checkboxFilter”>
<label for=”moderate”>Moderate</label><br>
<input type=”checkbox” id=”slow” key=”tempo” value=”slow” v-model=”checkboxFilter”>
<label for=”slow”>Slow</label><br>
</div>
<div class=”genres”><h1>THEMES</h1><br>
<input type=”checkbox” id=”Corporate” key=”theme” value=”corporate” v-model=”checkboxFilter”>
<label for=”Corporate”>Corporate</label><br>
<input type=”checkbox” id=”Technology” key=”theme” value=”technology” v-model=”checkboxFilter”>
<label for=”Technology”>Technology</label><br>
<input type=”checkbox” id=”Food” key=”theme” value=”food” v-model=”checkboxFilter”>
<label for=”Food”>Food</label><br>
<input type=”checkbox” id=”Education” key=”theme” value=”education” v-model=”checkboxFilter”>
<label for=”Education”>Education</label><br>
</div>
<div class=”genres”><P></P><br>
<input type=”checkbox” id=”Travel” key=”theme” value=”travel” v-model=”checkboxFilter”>
<label for=”Travel”>Travel</label><br>
<input type=”checkbox” id=”Sport” key=”theme” value=”sport” v-model=”checkboxFilter”>
<label for=”Sport”>Sport</label><br>
<input type=”checkbox” id=”Fashion” key=”theme” value=”fashion” v-model=”checkboxFilter”>
<label for=”Fashion”>Fashion</label><br>
<input type=”checkbox” id=”Landscape” key=”theme” value=”landscape” v-model=”checkboxFilter”>
<label for=”Landscape”>Landscape</label><br>
</div>
</div>

new Vue({
el: ‘#app’,
data: {
isPlaying: ‘’,
songs: [
{
id: 1,
title: “Track 1”,
description: “Description 1”,
url:”./mp3/track1.mp3”,
keywords: “achievement, advertising, background, beautiful, beauty, business, business music, commercial, company, confident, corporate, corporate background, corporate presentation, corporate presentations music, corporate video, corporation, corporative, happy”,
genre:”pop, rock”,
moods:”uplifting, upbeat, playful”,
tempo:”moderate”,
theme:”corporate”,
},

search: “”,
checkboxFilter: {genre: [], moods: []},
},
computed: {
filteredSongs: function(value, key){
let fltrdSongs = this.songs;
// checking if “genre” and “moods” arrays have elements in any of them
if(this.checkboxFilter.genre.length + this.checkboxFilter.moods.length > 0) {
// checking if “genre” array has elements
if (this.checkboxFilter.genre.length > 0) {
fltrdSongs = this.songs.filter((song) => {
let length = this.checkboxFilter.genre.length;
while(length–){
if ((song.genre).indexOf(this.checkboxFilter.genre[length])!=-1) {
return true;
}
}
});
}
// checking if “moods” array has elements
if(this.checkboxFilter.moods.length > 0) {
fltrdSongs = fltrdSongs.filter((song) => {
let length = this.checkboxFilter.moods.length;
while(length–){
if ((song.moods).indexOf(this.checkboxFilter.moods[length])!=-1) {
return true;
}
}
});
}
}

[Vue.js] Where is vuex physically stored?

How can i access vuex data using the console or any other method when my vue.js app is on production?

Can’t use vue.js Devtools because when on production

Solution :

You can access the Vuex store from the dev console by querying any element that has vue.js properties. For example:

document.getElementsByTagName(‘a’)[0].__vue__.$store

If you are using nuxt, you can also access it from

window.$nuxt.$store

[Vue.js] Failed to generate render function SyntaxError missing ) after argument list

I came across a very strange behavior where vue.js is complaining about a missing ) but in reality there is no missing ). What makes it even stranger is that if I do not use the filterOptions object but make a simple property then it works. For some reason it can’t handle it being a property of an object.

[vue.js warn]: Failed to generate render function: SyntaxError: missing )
after argument list

But if I change it to this (without filterOptions object) then it works

Here’s my date_format function and data.

methods:
{
date_format(date)
{
return (date != null && date != ‘’) ?
moment(date, ‘YYYY-MM-DD’).format(“DD.MM.YYYY”) : ‘’
},
},

data()
{
return {
total: 10,
startdate: ‘’,
filterOptions: {
perPage: 10,
orderBy: ‘end_date’,
orderDirection: ‘desc’,
date_start: ‘’,
end_date_end: ‘’,
},
}
},

Solution :

To use a property that is derived from another property as a v-model, you should use computed properties instead of methods. Computed properties have two explicit methods, get and set.

In the getter you can get the YYYY-MM-DD formatted startdate and convert it into DD.MM.YYYY and return, and in the setter you can take a DD.MM.YYYY and convert it into YYYY-MM-DD and set it into startdate.

<div id=”app”>
<p>{ message }</p>
<input v-model=”formatted”>
{ startdate }
</div>

new Vue({
el: “#app”,
data: {
message: “Hello Vue.js!”,
total: 10,
startdate: “2017-02-15”,
filterOptions: {
perPage: 10,
orderBy: “end_date”,
orderDirection: “desc”,
date_start: “”,
end_date_end: “”
}
},
computed: {
formatted: {
get: function() {
return this.startdate != null && this.startdate != “”
? moment(this.startdate, “YYYY-MM-DD”).format(“DD.MM.YYYY”)
: “”;
},
set: function(newValue) {
this.startdate = newValue != null && newValue != “”
? moment(newValue, “DD.MM.YYYY”).format(“YYYY-MM-DD”)
: “”
}
}
}
});

Solution 2:

I agree with the above answer, and there is a very stupid way to directly pass the filterOptions object into the method.

Top 10 Web Skills

html5, css3, javascript, node.js, etc

[Vue.js] How to pass dynamic mouse-scroll value as a prop in VueJS

Solution :

[Vue.js] How i can change date format in vue.js

Solution :

[Vue.js] OrderBy not working for ascending but works for descending

Solution :

Solution 2:

[Vue.js] vee validate works for the first field only?

Solution :

[Vue.js] Pass parms to v-dialog instead route

Solution :

Solution 2:

[Vue.js] Hijicking a key combination in vue

Solution :

[Vue.js] Is there a way to get and ref two or more local json file using vue and axios

Solution :

Solution 2:

[Vue.js] Multiple Checkbox Filtering to Narrow Down a Search

Solution :

[Vue.js] Where is vuex physically stored?

Solution :

[Vue.js] Failed to generate render function SyntaxError missing ) after argument list

Solution :

Solution 2: