link137 link138 link139 link140 link141 link142 link143 link144 link145 link146 link147 link148 link149 link150 link151 link152 link153 link154 link155 link156 link157 link158 link159 link160 link161 link162 link163 link164 link165 link166 link167 link168 link169 link170 link171 link172 link173 link174 link175 link176 link177 link178 link179 link180 link181 link182 link183 link184 link185 link186 link187 link188 link189 link190 link191 link192 link193 link194 link195 link196 link197 link198 link199 link200 link201 link202 link203 link204 link205 link206 link207 link208 link209 link210 link211 link212 link213 link214 link215 link216 link217 link218 link219 link220 link221 link222 link223 link224 link225 link226 link227 link228 link229 link230 link231 link232 link233 link234 link235 link236 link237 link238 link239 link240 link241 link242 link243 link244 link245 link246 link247 link248 link249 link250 link251 link252 link253 link254 link255 link256 link257 link258 link259 link260 link261 link262 link263 link264 link265 link266 link267 link268 link269 link270 link271 link272 link273

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

<Navbar v-on:scroll=”this.changeScrollPos” v-bind:scrollPos=”scrollPos” />

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>

<script>
export default {
props: [
“scrollPos”
]
}
</script>

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 id=”app”>
<div class=”search-music”>
<input type=”text” v-model=”search” placeholder=”Enter a keyword to refine the search”/>
</div>

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

<div class=”overlay-play text-center” v-if=”isPlaying && (currentSong.id === song.id )” @click=’pause’>
<i class=”icon ion-ios-pause”></i>
</div>

<div class=”overlay-play text-center” @click=’play(song)’ v-else>
<i class=”icon ion-ios-play”></i>
</div>
</div>
</div>
</template>
</div>

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;

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())
});
}

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;
}

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())
});
}

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

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script><div id=”app”>
<div class=”search-music”>
<input type=”text” v-model=”search” placeholder=”Enter a keyword to refine the search”/>
</div>

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

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

<div class=”overlay-play text-center” v-if=”isPlaying && (currentSong.id === song.id )” @click=’pause’>
<i class=”icon ion-ios-pause”></i>
</div>

<div class=”overlay-play text-center” @click=’play(song)’ v-else>
<i class=”icon ion-ios-play”></i>
</div>
</div>
</div>
</template>
</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”,
},

{
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: {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;
}
}
});
}
}

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())
});
}
}
});

[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

<input
v-model=”date_format(filterOptions.date_start)”
/>

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

<input
v-model=”date_format(startdate)”
/>

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.