link2877 link2878 link2879 link2880 link2881 link2882 link2883 link2884 link2885 link2886 link2887 link2888 link2889 link2890 link2891 link2892 link2893 link2894 link2895 link2896 link2897 link2898 link2899 link2900 link2901 link2902 link2903 link2904 link2905 link2906 link2907 link2908 link2909 link2910 link2911 link2912 link2913 link2914 link2915 link2916 link2917 link2918 link2919 link2920 link2921 link2922 link2923 link2924 link2925 link2926 link2927 link2928 link2929 link2930 link2931 link2932 link2933 link2934 link2935 link2936 link2937 link2938 link2939 link2940 link2941 link2942 link2943 link2944 link2945 link2946 link2947 link2948 link2949 link2950 link2951 link2952 link2953 link2954 link2955 link2956 link2957 link2958 link2959 link2960 link2961 link2962 link2963 link2964 link2965 link2966 link2967 link2968 link2969 link2970 link2971 link2972 link2973 link2974 link2975 link2976 link2977 link2978 link2979 link2980 link2981 link2982 link2983 link2984 link2985 link2986 link2987 link2988 link2989 link2990 link2991 link2992 link2993 link2994 link2995 link2996 link2997 link2998 link2999 link3000 link3001 link3002 link3003 link3004 link3005 link3006 link3007 link3008 link3009 link3010 link3011 link3012 link3013

[Vue.js] How to extract first font name of font-family value by using regex?

to extract the first font name without apostrophes of font family value by using Regex.

I don’t know how to do it using Regex. Please guide me step by step to solve this problem. Thank in advance!

Input:
1. “‘Helvetica Neue’, Helvetica, sans-serif”
2. “Arial, ‘Helvetica Neue’, Helvetica, sans-serif”
3. “Arial”

Expected output:
1. Helvetica Neue
2. Arial
3. Arial

Solution :

You can easily split() the string by comma , grab the first part and replace() the single quotes to get the job done but if you need regex then this could be a solution.

const regex = /“‘?(.*?)’?(?:,|”)/ig;
const str = `“‘Helvetica Neue’, Helvetica, sans-serif”
“Arial, ‘Helvetica Neue’, Helvetica, sans-serif”
“Arial”`;
let m;

while ((m = regex.exec(str)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}

// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
if (groupIndex == 1)
console.log(`${match}`);
});
}

[Vue.js] Child propagation to parent from object of objects

there is a table with column dropdowns and instead of creating objects for each (ie data: {col1: {},..}), there is a object of objects that is initialized and populated on “created”.

Thus, the issue I’m having is, the child components are not properly propagating changes to the parent component when the object being passed to the child prop is an object from an object of objects.

FYI the tableData is retrieved via axios.
I’m using quasar and vue.

I’ve initially had a single object being passed to the child components and was able to have sync modifier working properly. Then moved on to making an object of objects and passing to each column.

console.log(this.selected) in the child component selectionList is printing empty.

NOTE: this is an example that contains the root issue.

table.vue.js #parent

<q-table
row-key=”id”
:tableData
:columns
:visible-columns=”visibleColumns”>
<q-tr slot=”top-row” slot-scope=”props”>
<q-td v-for=”col in visibleColumns”>
<child-component
:selected.sync=”dropDownSelected[col]“
:options=”dropDownOptions[col]“
/>
</q-td>
</q-tr>
</q-table>

<script>
import ChildComponent from ‘path/to/child-component.vue’;
export default{
name: ‘table’,
components: {
‘child-component’: ChildComponent
},
data(){
return{
tableData: [{id: 1, col1: ‘a’, col2: ‘b’, col3: ‘c’}],
columns: [
{name: ‘col1’, label: ‘Col1’, field: ‘col1’},
{name: ‘col2’, label: ‘Col2’, field: ‘col2’},
{name: ‘col3’, label: ‘Col3’, field: ‘col3’},
],
visibleColumns: [‘col1’, ‘col2’],
dropDownSelected: {},
dropDownOptions: {}
}
},
created() {
this.initializeDropDown();
this.populateTableSelect();
},
methods: {
initializeDropDown(){
for(var col in this.columns){
this.dropDownSelected[col.name] = [];
this.dropDownOptions[col.name] = [];
}
},
populateTableSelect(){
// initiallize all columns with new Set
var tmp_set = {};
for(var col in this.dropDownOptions){
tmp_set[col] = new Set();
}
// iterate row, add items to set
for(var row = 0; row < this.tableData.length; row++){
for(var col in this.dropDownOptions){
tmp_set[col].add(this.tableData[row][col]);
}
}
for (var col in this.dropDownOptions) {
tmp_set[col] = […tmp_set[col]];
tmp_set[col].sort();
tmp_set[col] = tmp_set[col].map(item => ({ label: item, value: item }));
tmp_set[col].unshift({ label: ‘Select All’, value: ‘Select All’ });
this.dropDownOptions[col] = tmp_set[col];
}
}
},
}
</script>

child-component.vue

<q-select
multiple
:options=”options”
:value=”selected”
@input=”selectionList”>
</q-select>

<script>
export default{
name: ‘child-component’,
props: {
options: {type: Array, required: true},
selected: {type: Array, default: () => ([])},
allValue: { type: String, default: ‘Select All’ }
},
methods: {
selectionList(inputList){
// logic below used from outside source
if (inputList.find(item => item === this.allValue)){
if(this.selected.find(item => item === this.allValue)){
// case 1: one item is unchecked while ‘all’ is checked -> unchecks ‘all’ + keep other
inputList.splice(inputList.indexOf(this.allValue), 1);
this.$emit(‘update:selected’, inputList);
}
else {
// case 2: ‘all’ is checked -> select-all
this.$emit(‘update:selected’, this.options.map(option => option.value));
}
}
else {
if(this.selected.find(item => item === this.allValue)){
// case 3: unchecking ‘all’ -> clear selected
this.$emit(‘update:selected’, []);
}
else{
if(inputList.length === this.options.length -1){
// case 4: len is equal to options -> select-all
this.$emit(‘update:selected’, this.options.map(option => option.value));
}
else {
// case 5: check an item
this.$emit(‘update:selected’, inputList);
}
}
}
},
},
}
</script>

I expected passing an object from an object of objects would’ve allowed ‘Select All’ logic to propagate to the parent.

I see no errors coming so there is no clue as to what js is doing.

Solution :

From what I see, this is a simple reactivity problem explained in the documentation.
dropDownOptions and dropDownSelected are objects on which you add new keys. Every time you do that, you need to call this.$set.

I think if you only change this method you should be good:

initializeDropDown(){
for(var col in this.columns){
this.$set(this.dropDownSelected, col.name, []);
this.$set(this.dropDownOptions, col.name, []);
}
},

[Vue.js] How to not be able to access manually /login after you logged in - VueJS?

I’m learning VueJS from an Udemy course. In the module about authentication, the instructor didn’t make the whole process, so I had to try it by my self for 2 days but I succeeded 90%.

The backend is on firebase, so after login with correct data, I get back a token that I send it to local storage.

With the code that I make it, you can’t see the dashboard if you are not authenticated(even you try the route manually), but what I don’t like is that you can see the login page after you are authenticated(if you type /signin).

This last part is not normal to be. So if you are authenticated, when you try manually to go to /signin, you can.

In the router.js:

const routes = new VueRouter({
mode: ‘history’,
routes: [
{ path: ‘/‘, component: WelcomePage },
{ path: ‘/signup’, component: SignupPage },
{ path: ‘/signin’, component: SigninPage },
{ path: ‘/dashboard’, component: DashboardPage}
]
});

routes.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const publicPages = [‘/signin’, ‘/signup’];
const authRequired = !publicPages.includes(to.path);
const loggedIn = localStorage.getItem(‘token’);
console.log(loggedIn);
if (authRequired && !loggedIn) {
return next(‘/signin’);
}
next();
});

And in store.js, inside login action:

if (localStorage.getItem(‘token’)) {
router.replace(“/dashboard”);
}

Any idea what to do to /login and /register routes after login so to not be able to see them, even you manually try these routes?

If the user will try manually /signin or /signup, to be redirected to /dashboard.

Solution :

In my vue.js application I just use the router.beforeEach method with meta data plus the state of my token which I pull from my store.

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
var token = store.getters.loggedIn;
if (!token ) {
next({
path: ‘/login’,
})
} else {
next()
}
}else if (to.matched.some(record => record.meta.requiresVisitor)) {
if (token) {
next({
path: ‘/‘,
})
} else {
next()
}
}
})

It checks each time the route changes.

The requiresVisitor meta is something I placed in my router object

{
// this is can only be viewed if not logged in.
path: ‘/login’,
name: ‘login’,
component: () => import(/* webpackChunkName: “login” */ ‘./views/Login.vue’),
props: true,
meta: {
requiresVisitor: true,
layout: “landing”,
},
},
{
// this can only be viewed if logged in.
path: ‘/‘,
name: ‘dashboard’,
component: () => import(/* webpackChunkName: “dashboard” */ ‘./views/Dashboard.vue’),
props: true,
meta: {
requiresAuth: true,
layout: “default”,
},
},

you can read more about route guards Here

theses methods are typically used in the entry point to the app main.js or in the router.js file.

Solution 2:

You can add a per-route guard (https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard) to make the logic only run when /signin and /signup is matched, but if you want to keep it in the loop that runs over all routes you’re on the right track — you just need to invert the logic.

So what you want do is to add another if statement, checking if isLoggedIn is true, and that you’re trying to access a public page, and in that case redirect the user to the /dashboard route.

if (!authRequired && loggedIn) {
next(‘/dashboard’);
return;
}

[Vue.js] Vuex getter does not return current state value

there is an object inside the Vuex state with certain server details. The state, mutation and getter look like this:

// Code inside store/index.js of the nuxt application

const state = () => ({
serverDetails: {}
})

const mutations = {
SERVER_DETAILS(state, value) {
Vue.set(state, ‘serverDetails’, value)
}
}

const getters = {
getServerDetails(state) {
console.log(‘GETTER: get details’)
return state.serverDetails
}
}

export { state, mutations, getters }

Those details are initialized in the browser via an axios Ajax call, which does commit() on completion, e.g.

commit(‘SERVER_DETAILS’, data)

Now I try to access those details inside the browser console but get different results.
Inside the browser console:

Output in the console during initial page load:
GETTER: get details

\> $store.state.serverDetails.timezone
Output: 7200

\> $store.getters.getServerDetails.timezone
Output: undefined

\> $store.commit(‘SERVER_DETAILS’, {timezone: 123})
\> $store.state.serverDetails.timezone
Output: 123

\> $store.getters.getServerDetails.timezone
Output: undefined

As the output GETTER: get details is only displayed once on page load it seems, that Vuex caches the getters response and does not even call thee getter function later. Not even after I manually trigger a commit()…

Question: Am I doing something wrong here? Why does the getter return an empty object, while directly accessing the state works?

Solution :

Though, this does not solve the actual problem (getter is not updated on commit) - this workaround forces Vuex to re-initialize the entire state.

there is added this code in an axios ajax response handler, which occurs only once per session:

commit(‘SERVER_DETAILS’, data)

$store.hotUpdate($store.state) // <<– This line is new.

[Vue.js] invalid Firebase binding source when trying to use readyCallback with vuefire

This is my first time using Vuefire. to render some data after the data is loaded using db.ref(‘page_data’). In the docs, there is read that you can use a function inside of firebase: {} to have a callback when its ready called readyCallback: function(){}

but for some weird reason when I use this firebase throws an error:

invalid Firebase binding source

My <script> tag looks like this

import { db } from “./firebase”

export default {
name: ‘App’,
firebase: {
data: db.ref(‘page_data’),
readyCallback: function(){
console.log(“Ready!”)
}
},
data(){
return{
data: ui_data,
}
}
}

If i remove readyCallback no errors are shown, but the problem is that if i try to render the data before the request is finished the vue.js app errors out on me.

Solution :

readyCallback should be nested inside:

firebase: {
data: {
source: db.ref(‘page_data’),
readyCallback: function(){
console.log(“Ready!”)
}
}
},

[Vue.js] how add a href inside nuxt-link?

there is array of cards like this

<nuxt-link :to=”{ name: ‘portfolio-slug’, params: { slug: card.slug } }”>
<a :href=”card.link>Go to href</a>
</nuxt-link>

click on card with nuxt-link should opening page with details of card

click on a href should open external site

but when i clicking on a-href its open details and ignoring a-href

tried use some tags for nuxt-link but not helped

Solution :

f you click that inside and (it’s just what generates) you are actually sending the click event to both elements. That it’s not good practice (even stopping the propagation with js). just don’t nest it

Perhaps absolute position it with css if it has to be on top of the “card”.

Try something like:

<div class=”card”>
<nuxt-link :to=”{ name: ‘portfolio-slug’, params: { slug: card.slug } }”>
{ card.content }
</nuxt-link>
<a class=”goToHref” :href=”card.link>Go to href</a>
</div>

and

.card {
position: relative;
}

.goToHref {
position: absolute;
bottom: 24px; // depending where you need it, maybe you need top property
right: 24px; // depending where you need it, maybe you need left property
}

[Vue.js] Push duplicate query parameters to Vue router

I would like to construct a url string like so “http://localhost:64549/request/list?page=1&dataLakeStatus=1&dataLakeStatus=2" with duplicate keys in the query parameters. How can I do this with vue.js router, since JS doesn’t allow for duplicate keys?

private redirectToFirstPage() {
const query = { page: this.currentPage.toString(), dataLakeStatus: ‘1’, dataLakeStatus: ‘2’ };
this.$router.push({ query });
}

Solution :

Try the following:

private redirectToFirstPage() {
const query = {
page: this.currentPage.toString(),
dataLakeStatus: [1, 2]
};

this.$router.push({ query });
}

Solution 2:

<router-link :to=”doubleQuery”>Double<router-link>

and in you computed method

computed: {
doubleQuery() {
return `${this.$route.path}?dataLakeStatus=1&dataLakeStatus=2`
}
}

[Vue.js] Vue Slot rendering name instead of content

When I use one of the vue.js select components I’ve tried, something strange happens. Where the list values were supposed to appear instead I’m getting the slot names. This will be much clearer in the example.

I’ve tried using vue-multiselect, vue-select, & vue-cool-select and I’ve come to the conclusion that this is not a library problem, but vue’s or maybe my configuration.

This example shows vue-multiselect but happens with every library I’ve used so far. It is the most basic example provided by the vue-multiselect documentation itself.

<template>
<div>
<multiselect
v-model=”value”
:options=”options”
:searchable=”false”
:close-on-select=”false”
:show-labels=”false”
placeholder=”Pick a value”
\></multiselect>
</div>
</template>

<script>
export default {
data() {
return {
value: null,
options: [‘Select option’, ‘options’, ‘selected’, ‘mulitple’]
}
},
}
</script>

This is what I get:
https://i.imgur.com/mJjs6lU.png

Anyone got any idea why this might be happening?

Thank you!

Solution :

the code should be working fine with this code here.

<template>
<div>
<multiselect
v-model=”value”
:options=”options”
:searchable=”false”
:close-on-select=”false”
:show-labels=”false”
placeholder=”Pick a value”
\></multiselect>
</div>
</template>

<script>
import Multiselect from “vue-multiselect”;

export default {
name: “App”,
components: {
Multiselect
},
data() {
return {
value: null,
options: [‘Select option’, ‘options’, ‘selected’, ‘mulitple’]
}
},
};
</script>

Solution 2:

So there is a function in my project to handle translations called _t() which is also defined as a Vue.prototype._t(). And so it happens that Vue.prototype._t refers to the renderSlot() function.

Remember to never prototype vue.js with a function called _t(). I lost nearly 4h until I tried commenting almost every line of code.

[Vue.js] Vue Lazy load/Async components loading at initial load

I’m trying to get lazy load/async .js chunks to work in vue.js application.

I created vue.js project with

vue.js create project

Now in the router and views where to load components i use syntax

component: () => import(‘path/to/component’)

Splitting into chunks works, I’m getting 0.js, 1.js etc and when I click at the appropriate link where the component or route is needed it loads that chunk.

Problem is that when I initialy load first page it loads all chunks anyways 0.js….5.js etc and when I click at the link that needs 2.js for example it downloads it again.

For build/serve I’m using default vue-cli

npm run serve

there is tried to use router.onReady() but it still loads all chunks on initial /login page even if the components are not needed.

Thank you in advance

Solution :

Ok, so after tinker with it for quite some time I managed to find out that it’s prefetch feature.

So after creating vue.config.js in the root project directory and typing

module.exports = {
chainWebpack: (config) => {
config.plugins.delete(‘prefetch’);
}
};

got it working. As the each component is roughly 50kB this is quite the saving on the bandwidth.

[Vue.js] dhtmlx scheduler timeline month view a event on two month

I’ve two problems with dhtmlx scheduler and I need the help;

Problem 1

I’ve a event who started at the last day of may and finish the first day of June. On the May view, I see my event object but he’s not visible on the June view. The following event is visible on the two month view: May_lastDay -> June_firstDay+n (first day = no, second and more = yes).
Furthermore, the events started the previous month is displayed but not to the start of first day, he start on the half of the day (graphicaly only) (ex:05/25-06/02) . I think the event finished at first day is not visibile because of this.

Problem 2

I can’t grow up the event by the start bypass the previous month(ex: actually 06/02, to grow up for the event start the 05/31 (the last day of previous month = maximum) and finish at the same time of previously). But I can do the reverse: actually 05/29 - 05/31, I can grow up for 05/29 - 06/01 (1rst day max).

Config:

scheduler.createTimelineView({
name: “timeline”,
x_unit: “day”,
x_date: “%d %D “,
x_step: 1,
x_size: 31,
section_autoheight: false,
y_unit: scheduler.serverList(“visibleRooms”),
y_property: “room”,
render:”bar”,
round_position:true,
event_dy: “full”,
dy:60,
second_scale:{
x_unit: “month”,
x_date: “%F, %Y”
},
// scrollable: true,
// scroll_position:new Date(2018, 0, 15)
});

Picture 1 : May
Picture 2: June

on the second last line of the second picture, there should be the red event on half of the first day of June.

on the 3rd and 7th lines there should not be a hole on the 1st day of June. (when we move the cursor on the event we can see that the dates are still good)

Solution :

Problem 1

I tried to reproduce the issue http://snippet.dhtmlx.com/9cd792b62
Events rendered correctly according to dates in data. If end_date is:

“end_date”: “2019-06-01 00:00”

it means, that the event finishes on the last day in May and doesn’t cover June 1st.
If you want to cover also June 1st you should set end date “2019-06-02 00:00”. Maybe you could at least use “2019-06-01 23:59:59”, but the correct case is to use “2019-06-02 00:00”.
If it necessary for you, you could correct event dates in onEventLoading handler.

Problem 2

I don’t fully understand the question. Please reproduce it with the data in the snippet system and share the updated link. Also specify steps to replicate the issue if it’s necessary
http://snippet.dhtmlx.com/13665e8a7