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>

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

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.

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.

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

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.

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

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) {
// …
}
}

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

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.