link1507 link1508 link1509 link1510 link1511 link1512 link1513 link1514 link1515 link1516 link1517 link1518 link1519 link1520 link1521 link1522 link1523 link1524 link1525 link1526 link1527 link1528 link1529 link1530 link1531 link1532 link1533 link1534 link1535 link1536 link1537 link1538 link1539 link1540 link1541 link1542 link1543 link1544 link1545 link1546 link1547 link1548 link1549 link1550 link1551 link1552 link1553 link1554 link1555 link1556 link1557 link1558 link1559 link1560 link1561 link1562 link1563 link1564 link1565 link1566 link1567 link1568 link1569 link1570 link1571 link1572 link1573 link1574 link1575 link1576 link1577 link1578 link1579 link1580 link1581 link1582 link1583 link1584 link1585 link1586 link1587 link1588 link1589 link1590 link1591 link1592 link1593 link1594 link1595 link1596 link1597 link1598 link1599 link1600 link1601 link1602 link1603 link1604 link1605 link1606 link1607 link1608 link1609 link1610 link1611 link1612 link1613 link1614 link1615 link1616 link1617 link1618 link1619 link1620 link1621 link1622 link1623 link1624 link1625 link1626 link1627 link1628 link1629 link1630 link1631 link1632 link1633 link1634 link1635 link1636 link1637 link1638 link1639 link1640 link1641 link1642 link1643

[Vue.js] Vue Using input value in function

when using Single File Components and there is a modal component that has an
input box but I can’t get the value of the input in a function below using the v-modal name. It keeps coming back as ‘name is not defined’. Am I using the v-model attribute incorrectly?

<template>
<input v-model=”name” class=”name”></input>
</template>

<script>
export default {

methods: {

applyName() {
let nameData = {name}
}
}
}
</script>

Solution :

You’re right, you’re using the v-model property incorrectly.

First off you need to define a piece of state in the component, using data:

export default {
data: () => ({
name: ‘’,
}),
methods: {
log() {
console.log(this.name);
}
}
}

You can then bind this piece of data in the component using v-model=”name”, just like you did. However, if you want to access this piece of state in the method, you should be using this.name in the applyName() method.

the {name} syntax is used to get access to the data in the template, like so:

<template>
<span>
My name is: {name}!
</span>
</template>

Solution 2:

You have to use this pointer to access the model:

<template>
<input v-model=”inputName” class=”name”></input>
</template>

<script>
export default {

data() {
return {
inputName: ‘’,
}
},

methods: {

applyName() {
// Notice the use of this pointer
let nameData = { name: this.inputName };
}
}
}
</script>

Solution 3:

Look at the doc https://vuejs.org/v2/guide/forms.html#v-model-with-Components

In the template, you are referring by name to data, computed or methods. In this case, it refers to data. When the input changes the name then the data is updated.

It is possible to use in a function referring to this.

<template>
<input v-model=”name” class=”name”></input>
</template>

<script>
export default {

data() {
return { name: ‘’ }
},
methods: {

applyName() {
let nameData = this.name
}
}
}
</script>

[Vue.js] Previous and current data in Vue life hooks

How can I get previous and current data in updated life hook (similar to React)? to scroll elements list to the very bottom and to this I need:

already rendered updated DOM (so to use updated hook to calculate scroll)
information whether scroll or not (scroll only when number of current
elements is bigger than previous).

I figured something like this:

name: “list”,
props: [“elements”],
data() {
return {
scrollBottom: false
};
},
updated() {
if (this.scrollBottom) {
window.scroll(0, this.$root.$el.scrollHeight); /* full window / app height list*/
}
},
watch: {
elements(current, prev) {
this.scrollBottom = current.length > prev.length;
}
}

Im not sure if this is a right approach but vue.js life hooks don’t receive any information about previous data. Can I do it better? Thanks for any help.

EDIT
I found this helpful topic: link. Apparently, the best way to handle this is to use this.$nextTick method.

Solution :

Well, In vue.js official docs, They mentioned as below:

updated Hook

The components DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases, you should avoid changing the state inside the hook. To react to state changes, its usually better to use a computed property or watcher instead.

Hope this helps!

Solution 2:

I could write smth like this:

{
name: “list”,
props: [“elements”],
data() {
return {
// scrollBottom no needs here
};
},
methods: {
scrollToBottom() {
window.scroll(0, this.$root.$el.scrollHeight); /* full window / app height list*/
}
},
watch: {
elements(current, prev) {
if (current.length > prev.length)
this.scrollToBottom();
}
}
}

In watch method use scrollToBottom directly

[Vue.js] JOI how to allow empty spaces and punctuation

to allow Joi to allow spaces/whitespaces in a title field of a form.

Working tomorrow with Jude.

should be allowed as wel as

Morningwalk

At this moment only the last one is validated as true. Here is my joi validation:

const schema = Joi.object().keys({
title: Joi.string().alphanum().required().max(50),

I added Regex but without result.

title: Joi.string().alphanum().required().max(50), regex(
new RegExp(‘^\w+( +\w+)*$’))

What is the right way?

Solution :

The .alphanum() makes the check ignore whitespace. Also, when you define a regex using a constructor notation, you are using a string literal where backslashes are used to form string escape sequences and thus need doubling to form regex escape sequences. However, a regex literal notation is more convenient. Rather than writing new RegExp(‘\\d’) you’d write /\d/.

So, you may use this to allow just whitespaces:

title: Joi.string().required().max(50), regex(/^\w+(?:\s+\w+)*$/)

However, you seem to want to not allow commas and allow all other punctuation.

Use

title: Joi.string().required().max(50), regex(/^\s*\w+(?:[^\w,]+\w+)*[^,\w]*$/)

Details

^ - start of string
\s* - 0 or more whitespaces (or, use [^,\w]* to match 0 or more chars other than comma and word chars)
\w+ - 1 or more word chars (letters, digits or _, if you do not want _, replace with [^\W_])
(?:[^\w,]+\w+)* - zero or more repetitions of

[^\w,]+ - 1 or more chars other than comma and word chars
\w+ - 1 or more word chars

[^,\w]* - 0 or more chars other than comma and word chars
$ - end of string.

[Vue.js] Automatically redirect to another page when link is entered in input box

when creating a simple web page that will allow the user to paste a web url link into an input box. Once they have pasted it in then the page will automatically send them to that specific page.

I don’t need a button, just a way for them to paste and then the page loads the url they have pasted.

<template>
<div class=”importEvent”>
<img class=”imageSize” src=”~/assets/Missing Icons/facebook.svg” alt=”Facebook”>
<InputComponent placeholder=”Paste the facebook event here” v-model=”facebookPaste” class=”inputFacebook”></InputComponent>

<div class=”manualOption”>
or <nuxt-link to=”/create-event” class=”manualLink”>create manually</nuxt-link>
</div>
</div>
</template>

If someone can please help, it would be much appreciated.

Many thanks.

Solution :

I think the questions a litil bit awkward well you can set internal and check regularly value of input box when input box get some value redirect to another page

var input_text=””;
var time=setInterval(function(){
input_text=document.getElementsByTagName(“InputComponent”)[0].getAttribute(“value”);
if(input_text.length>0)
{
//redirect code goes here
clearInterval(time);
},500);

here i assume that the element index is 0;
it can be done the keybord eventListner also but there might be some problem if input gose with the help of mouse.

Solution 2:

I don’t know what is the InputComponent, but if use <input> you can try this code:

<template>
<div class=”importEvent”>
<img class=”imageSize” src=”~/assets/Missing Icons/facebook.svg” alt=”Facebook”>
<input type=”text” placeholder=”Paste the facebook event here” class=”inputFacebook” @paste=”pasteLink($event)”/>

<div class=”manualOption”>
or <nuxt-link to=”/create-event” class=”manualLink”>create manually</nuxt-link>
</div>
</div>
</template>
<script>
export default {
methods: {
pasteLink: function(evt) {
const url = evt.clipboardData.getData(“text”) || “”;
// you can check url by regexp
location.href = url; // go away to url
}
}
</script>

That code is just for the requirements - after paste url. Not when write text in input, but just after paste.
Hope this help you.

Solution 3:

I found a way to make this work.

I changed the <InputComponent> tag I had to a normal <input> tag and then added an @change which would link to a method I created.

Below is what I did.

<input placeholder=”Paste the facebook event here” v-model=”facebookPaste” @change=”pastedUrl()” class=”inputFacebook” onkeypress=”return false;”>

export default {
data() {
return {
facebookPaste: ‘’
}
},

methods: {
pastedUrl: function(){
location.replace(this.facebookPaste)
}
}
}

onkeypress=”return false;”: allows me to only paste and not type anything which is what I wanted as well.

[Vue.js] Cannot access data variable from a function within a method

when trying to access a data variable called localUser from a function inside of a method function. But as far as I can tell from the error message, I think it just can’t access localUser from data.

This is the error message I get:

Uncaught (in promise) TypeError: Cannot set property ‘localUser’ of undefined at eval (Form.vue?c13f:100) at auth.js:1361

there is marked where the problem is in the code with the comment of:

// THE BUG - cannot access this.localUser

What I’ve tried:

Using this.$data.localUser
Puting it into a .then function after the firebase.auth().onAuthStateChanged( (user) => {} function like in the code below, which actually worked but I can’t do it with .then, there is to do it inside of:

firebase.auth().onAuthStateChanged( (user) => {}

firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);
}).then(() => {
firebase.auth().onAuthStateChanged( (user) => {
if (user) {
// If already signed in
const db = firebase.firestore();
this.localUser = user;
console.log(this.localUser);
db.collection(“users”).doc(this.localUser.uid).set({
firstName: this.firstName,
lastName: this.lastName,
student: this.student,
teacher: this.teacher,
email: this.email,
password: this.password
})
.then(function() {
console.log(“Document successfully written!”);
})
.catch(function(error) {
console.error(“Error writing document: “, error);
});
}
})
})

The code I use and in which the problem lies on line 96:

<template>
<div id=”signup-form-con” v-if=”!connected”>
<form id=”signup-form” @submit.prevent>
<input v-model=’firstName’ type=”text” id=”signup-name” placeholder=’First name’><br />
<input v-model=’lastName’ type=”text” id=”signup-surname” placeholder=’Last name’><br />
<input v-model=’student’ type=”checkbox”><span class=’checkbox-label’>Student</span>
<input v-model=’teacher’ type=”checkbox”><span class=’checkbox-label’>Teacher</span><br />
<input v-model=’email’ type=”email” id=”signup-email”><br />
<input v-model=’password’ type=”password” placeholder=’Password’>
<input v-model=’confirmed’ type=”password” placeholder=’Confirm’><br />
<span>Sign in instead</span>
<button @click=’EmailSignIn’>Next</button>
</form>
<div class=”auto-signup”>
<span id=”or-use”>Or use</span>
<div class=”buttons”>
<button id=”google-signup” @click=’GoogleSignIn’>
<img src=”” alt=”” id=”google-img-signup”>
</button>
<button id=”facebook-signup” @click=’FacebookSignIn’>
<img src=”” alt=”” id=”fb-img-signup”>
</button>
</div>
</div>
</div>
</template>

<script>

export default {
name: “Form”,
props: {
connected: false
},
data: function() {
return {
localUser: null,
firstName: null,
lastName: null,
student: false,
teacher: false,
email: null,
password: null,
confirmed: null
}
},
methods: {

EmailSignIn: function() {

firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);

firebase.auth().onAuthStateChanged( (user) => {
if (user) {
// If already signed in
const db = firebase.firestore();
// THE BUG - cannot access this.localUser
this.localUser = user;
console.log(this.localUser);
db.collection(“users”).doc(this.localUser.uid).set({
firstName: this.firstName,
lastName: this.lastName,
student: this.student,
teacher: this.teacher,
email: this.email,
password: this.password
})
.then(function() {
console.log(“Document successfully written!”);
})
.catch(function(error) {
console.error(“Error writing document: “, error);
});
}
})

}).then(() => {

})
}

</script>

<style scoped lang=”sass”></style>

Solution :

I don’t understand why you’re executing all of the code (at least all that you show) in an error handler, but the reason you can’t access the vue.js context is the error handler [reformatted for clarity]:

firebase.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.catch(function(error) {
// all the code is here
})

You can make the context match by changing that to an arrow function:

firebase.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.catch((error) => {
// all the code is here
})

[Vue.js] Is it good to access DOM in vue js?

to know is it OK to access DOM in a vue.js js application?
For example, if to append an element (div) to body tag is this recommended to use document.getElementById in a vue.js js method?

there is no data that can be used to make or remove elements based on data.
I really just want to know is it common to use document to access DOM in vue.js js?

Something like this :

methods:{
appendToBody(){
let node = document.createElement(“div”);
document.getElementById(“#body”).appendChild(node);
}
}

Solution :

It depends on what part of the DOM you are referring too.

If you want to change the subtree that is handled by Vue, you shouldn’t do that. You should rely on reactive properties, conditional rendering, components. If you need to access an DOM element that is a child of the current component you can use refs.

If you need to change a part of the DOM which is outside of Vue’s realm then by all means do it.

In the case is not clear what you want to achieve and is hard to give a clear answer.

Solution 2:

You can use DOM functions like document.getElementById in vue.js to find elements, but never use DOM functions to change the DOM. Always do modifications within vue.js by changing variables and react to it in the template.

[Vue.js] Issue sorting by date with lodash

I’m trying to have a sorted list of items by data using lodash and vue.js moments, I’m using a computed property but for some reason this computed property named sortByUsedDate returns a number instead of a sorted array… it’s returning 11 exactly.

This is my code:

sortByUsedDate: function(){

let sortedCodes = _.orderBy(this.modalPayload.discountcodes, (code) => {
return Vue.moment(code.usedDate).format(‘MDYYYY’);
}, [‘desc’]);

let sortedWithoutUnused = _.remove(sortedCodes, function(code) {
return code.isBought === 1;
});

let unusedCodes = _.filter(this.modalPayload.discountcodes, function(code){
return code.isBought == 0;
});

let final = sortedWithoutUnused.push(unusedCodes);

return final;
}

Solution :

.push returns the length of the array. You should just return the array without the assignment:

sortedWithoutUnused.push(unusedCodes);

return sortedWithoutUnused;

But if you’re trying to combine two arrays, I don’t think you want to use push anyway, you’ll probably want to use … or .concat instead:

return […sortedWithoutUnused, …unusedCodes];

Or

return sortedWithoutUnused.concat(unusedCodes);

[Vue.js] Nuxt axios cannot handle the server sesponse

when new to Nuxt.js and when faced with a strange kind of issue. there is an endpoint in my backend API, allowing the end user to send a token and a new password and reset the user password.

While the request is sent correctly, and the server responding with the correct data:

In the Nuxt.js side, there is an issue, with the response data.

So, to handle all the HTTP requests using the axios, there is a class like that:

class WebAPI {
// $axios is the instance used in the Nuxt.js context
constructor($axios) {
this.$http = $axios;
}

async call(config) {
try {
///////////////////////////////////////////////////////
// HERE IS THE PROBLEM. THE FOLLOWING CONSOLE.LOG
// IT RETURNS undefined WHILE THE NETWORK RESPONSE
// RETURNS WITH DATA
///////////////////////////////////////////////////////
const result = await this.$http(config);
console.log(result);
// …
} catch( e) {
// …
}
}
}

And I use this class like:

const data = {
token,
new_password
};

const options = {
method: ‘POST’,
url : ‘/reset-password’,
data
};

return this.webApi.call(options);

But as you probably see, in the WebAPI service, the response of the axios is undefined.

Also, it worths to mention, that the exact same WebAPI class working perfectly with other API Requests I do throughout the application.

Could you help with that issue? Do you see anything wrong?

Solution :

I think you are using axios wrong. Try use $request method, like that:

async call(config) {
try {
const result = await this.$http.$request(config);
console.log(result);
// …
} catch( e) {
// …
}
}

[Vue.js] ApexCharts Donut Chart legend titles not reflecting provided data labels (stuck as 'series-1' etc.)

I’m importing Apexcharts’ simple donut chart to my Vue.js project, however, even after following the documentation provided on their site, the legend titles stay as ‘series-1, series-2, …’.

Here’s a picture of what’s rendered: Donut Chart

As you can see I’m following the documentation, adding series and labels to both the data object and the div element, but for some reason still can’t render the proper labels.

How would I go about resolving this issue?

Side note: switching legend.show from false to true does nothing.

<div id=”donut-chart”>

<v-container>
<div id=”chart”>
<apexchart
type=donut
width=380
:options=”chartOptions”
:labels=”labels”
:series=”series” />
</div>
</v-container>

</div>

import VueApexCharts from ‘vue-apexcharts’

export default {
name: ‘donut-chart’,
data: () => ({
series: [23, 11, 54, 72, 12],
labels: [“Apple”, “Mango”, “Banana”, “Papaya”, “Orange”],
chartOptions: {
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: ‘right’,
offsetY: 0,
height: 230
}
}
}),
components: {
apexchart: VueApexCharts,
}
}

Solution :

labels property should be a nested property of chartOptions, not to be passed as a separate prop.

chartOptions: {
labels: [“Apple”, “Mango”, “Banana”, “Papaya”, “Orange”],
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: ‘right’,
offsetY: 0,
height: 230
}
}

<apexchart
type=donut
width=380
:options=”chartOptions”
:series=”series” />

[Vue.js] vue.js deployment pointing to wrong static assets directory

when trying to deploy my first application made with vue-cli,

everything works in npm run dev,
now when I build with npm run build, it created dist directory, with file structure:
index.html
static/

but every reference in index.html etc.. is to /app/static

src=/app/static/js/vendor.87e3cb

if I create a directory named app and copy static to /app than everything works.

when obviously missing something simple.

Solution :

simple enough, in /config/index.js file, I had assetsPublicPath: ‘/app/‘,
set only for build, but commented out for dev.