[Vue.js] How can I get specific info depending on which project I click?

there is this component that shows the projects of an user, the fact is that to navigate to a new component by clicking on the project name that shows info about that specific project. So I guess that I need to create one component that recieves by vue.js router the id of the selected project.

How can I send that project id to the new page with router link that renders that info?

Maybe sending the project id as a param?

Solution :

You can use :parameterName in the route object.

const router = new VueRouter({
routes: [
{ path: ‘/user/:id’, component: User }
]
})

And you can access it in the component using this.$router.params.id

Depending on how you want to display the information, you can either use <router-view> or even nested <router-view> to show the project details. More information can be found here

https://router.vuejs.org/guide/essentials/dynamic-matching.html
https://router.vuejs.org/guide/essentials/nested-routes.html

[Vue.js] input range slider on thumb/pointer move complete fire event

when working with a HTML5 input range slider where API being called when user move pointer/thumb.

HTML

In all browser @change event firing after thumb/pointer move done. But same event firing in IE11 when moving pointer. Thats why my API calling frequently in IE11 when pointer is moving.

But I need this works same as other browser so that API only call when pointer movement is complete. Is any other way to do it in vuejs or jquery?

my method

myFunction:function(e) {
console.log(‘changed done’);
}

This is outputting in IE changed done each time I touch pointer.

Solution :

there is fixed it by adding 2 method, one for normal browser & other for IE using @mouseup

and now function

myFunction:function(e) {
if(IE){
return false;
}
}

for IE

myFunctionIE:function(e) {
if(!IE){
return false;
}
}

So I put same code but with different name function & its working as required

[Vue.js] Vue.js only displays 1 input field?

there is some small components. One for displaying a value and one input field that I bind to the same value.

The problem there is is that both input fields doesn’t display. One of them seems to be automatically removed. If I remove either one from the HTML, the other will show. How can there is multiple input fields?

My HTML looks like this:

My components looks like this:

Vue.component(‘prislapp-pris’, {
props: [‘pris’],
template: ‘<div class=”prislappPris”>[[ pris ]],-</div>’,
delimiters: [‘[[‘,’]]‘]
});

Vue.component(‘prislapp-forpris’, {
props: [‘forpris’],
template: ‘<div class=”prislappForpris”>[[ forpris ]],-</div>’,
delimiters: [‘[[‘,’]]‘]
});

Vue.component(‘input-forpris’, {
props: [‘forpris’],
template: `<input type=”text” :value=”forpris” @input=”$emit(‘input’, $event.target.value)” />`
});

Vue.component(‘input-pris’, {
props: [‘pris’],
template: `<input type=”text” :value=”pris” @input=”$emit(‘input’, $event.target.value)” />`
});

And my App looks like this:

Solution :

You need to close the components in DOM template:

<input-forpris :forpris=”lapp.forpris” @input=”handleInput2”></input-forpris>
<input-pris :pris=”lapp.pris” @input=”handleInput”></input-pris>

(source)

[Vue.js] Translate text coming from the script using Vue-i18n

I installed the vue-i18n plugin and followed the steps mentioned in this tutorial.
there is now all tags that are replaceable changed from English, to all languages to which there is localization files. My problem is that to translate messages that come from the JavaScript part of the page, for example error texts or notifications that pop up… etc.

For example, there is placeholders in my fields, and I wanted to translate them, so my template looks like this:

<b-form-input
id=”password”
v-model=”passwords.currentPassword”
:placeholder=”placeholders.currentPassword”
type=”password”
/>

in the script I set the text as follows

data() {
return {
placeholders: {
//currentPassword: “Enter the current password”,
currentPassword: this.$t(“changePassword.newPasswordPlaceholder”),
newPassword: “Enter the new password”,
confirmPassword: “Confirm the new Password”
}

I tried this solution but the text I get in the field is:changePassword.newPasswordPlaceholder

I tried calling i18n as a component but I failed… is there a way to set the variable values outside of the template (html)?

Solution :

currentPassword: this.$t(“changePassword.newPasswordPlaceholder”)

This code looking inside localization file for current language. There first looking for json value with the key changePassword. If it find then it will look for the key newPasswordPlaceholder then if it found it also will return the value of it. These values must be typed inside of all localization files. You must add these lines into json file as below to work as you want:

//json file where all localisation key : value pairs stored

“changePassword”: {
“newPasswordPlaceholder” : “text of password placeholder”
}

After defining these values you can use translation as you described in the example. Also there is no need to call from object as in the code :placeholder=”placeholders.currentPassword”. You can use i18n directly.

:placeholder=”$t(‘changePassword.newPasswordPlaceholder’)”

[Vue.js] Call to database after successful login is not being made

I’m having difficulty in getting an axios call to my database being initiated after a user has logged into my SPA.

A route (gaplist/3) brings the user to a page (gaplist.vue) which
detects if the user is logged in or not.
If not logged in, a login form is presented.
Once the entered username/password combo is accepted, the user is “pushed” to the same page (gaplist/3)
Here, the logged in status is detected and - this is where it all falls down - a call to the database would return a bunch of records associated with the user and the parameter “3”.

Unfortunately, the last step doesn’t fully happen. The logged in status is detected, but the database call is not made. Only if I refresh the page is the call made and the results presented.

What concept am I not grasping here?

Thanks, Tom.

My code is as follows:

GapList.vue.js (route: gaplist/3)

<template>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center>
<v-flex xs12 sm6>
<h1>Production and sale of produce</h1>
<v-card flat>
<div v-if=”isIn”>
<p v-for=”(card, id) in cards”>{card.product}</p>
<logout-button></logout-button>
</div>
<div v-else>
<gap-login :gapid=gapid></gap-login>
</div>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</template>

export default {
name: ‘GapList’,
components: {
GapLogin,
LogoutButton
},
data () {
return {
gapid: this.$route.params.id,
cards: [],
lang: this.$i18n.locale,
bNoRecords: false,
}
},
created(){
this.loadCrops(this.gapid,this.lang)
},
computed: {
isIn : function(){ return this.$store.getters.isLoggedIn},
},
methods: {
loadCrops(gapid,lang){
var vm = this;
if (this.isIn){
axios.get(‘/gapcroplist/‘ + gapid)
.then(function (resp) {
vm.cards = resp.data;
})
.catch(function (resp) {
vm.bNoRecords = true;
});
}
},
}
}
</script>

GapLogin.vue

<template>
<div class=”formdiv”>
<v-layout justify-center>
<h3>Login</h3>
<v-card flat>
<v-alert
v-if=”loginError”
:value=”true”
type=”error”
transition=”scale-transition”
dismissible
\>
You didn’t enter correct information
</v-alert>
<v-form class=”login” @submit.prevent=”login”>
<v-text-field
v-model=”form.email”
type=”email”
label=”Email”
required
autofocus
\></v-text-field>
<v-text-field
v-model=”form.password”
type=”password”
label=”Password”
required
\></v-text-field>
<v-btn
type=”submit”
\>Login in </v-btn>
</v-form>
</v-card>
</v-layout>
</div>
</template>

}
</script>

Solution :

Updated answer:

created hook will not be called again. Using updated will result in an error as well, as you would trigger another update and have an endless loop.

Instead of pushing to same route I would suggest that you emit a completed event:

In the login method in then instead of $router.push:

this.$emit(‘completed’)

And register the event on the gap-login-component:

<gap-login @completed=”completed” :gapid=gapid></gap-login>

And add that method to the GapList.vue-file:

completed () {
this.loadCrops(this.gapid, this.lang)
}

You are using axios in a global context, but it doesn’t exists, it seems.

Try using this.$axios:

this.$axios.get(‘/gapcroplist/‘ + gapid)

[Vue.js] Why the path in the link changes and the transition to this address is not performed?

I’m new in vue.js js. And my task is to take data from api, make pagination and when clicking on any post so that a new page opens with more detailed information about the post. I did the pagination, but I can’t make the transition. In clicking on the post, the link changes but the transition is not performed. Why the path in the link changes and the transition to this address is not performed?

Project on GitHub

Code of main page:

<template>
<div id=”app”>
<ul>
<li v-for=”(post, index) of paginatedData” class=”post”>
<router-link :to=”{ name: ‘detail’, params: {id: index} }”>
<img src=”src/assets/nature.jpg”>
<p class=”boldText”> { post.title }</p>
</router-link>
<p> { post.body }</p>
</li>
</ul>

</div>
</template>

Code of page to go to:

<template>
<div class=”post” v-if=”detail”>
<img src=”src/assets/nature.jpg”>
<h2>{ post.title }</h2>
<p>{ post.body }</p>
</div>
</template>

Code of main.js:

import vue.js from ‘vue’
import App from ‘./App.vue’
import VueRouter from ‘vue-router’

var Detail = require(‘./Detail.vue’)

Vue.use(VueRouter)

var router = new VueRouter({
routes: [
{path: ‘detail/:id’, name: ‘detail’, component: Detail }
]
})

new Vue({
el: ‘#app’,
render: h => h(App),
router: router,
}).$mount(‘#app’);

Solution :

First of all, in the Pagination.vue.js file you should use the character entity instead of the <etc.

Secondly, the routing change page is rendered, that is, the problem you describe is because you have less <router-view/> component, um, maybe you need to take a good look at vue-router

Finally, I feel that the html semantics and code specifications are poor, so you need to strengthen

i clone u project and run. The code has a lot of bugs

good u lucky

[Vue.js] Making POST to DRF using Axios

I’m trying to make a simple POST request using axios library inside of vuejs but for some reason, DRF is not receiving the parameters. When the same request is made via Postman it receives the parameters.

VueJS

postLogin(credentials){
return axios({
method: “POST”,
url: “company/login/“,
data: credentials,
}).catch(err => {
return TreatErrors.treatDefaultError(err);
})
}

DRF

@action(methods=[‘post’], detail=False)
# Debug set here shows POST comes empty from vuejs
def login(self, request, pk=None):
if not request.POST.get(‘email’):
raise ValidationError({
‘message’: ‘You must provide an email’
})

Using the Chrome DevTools I can clearly see the parameters are being sent to DRF

What there is tried
there is tried coping every Headers from Postman and paste it in axios but without any luck

postLogin(credentials){
return axios({
method: “POST”,
url: “company/login/“,
data: credentials,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
}).catch(err => {
return TreatErrors.treatDefaultError(err);
})
}

Solution :

Basically, I was accessing the data in the wrong way:

From this:

if not request.POST.get(‘email’):
raise ValidationError({
‘message’: ‘You must provide an email’
})

To This

data = request.data

if not data.get(‘email’):
raise ValidationError({
‘message’: ‘You must provide an email’
})

[Vue.js] How to take screen shot of a particular html div element in vue.js

In my web-application to allow user to choose from list of different style signature.When ever user chooses one signature style to take picture of the signature style and save it in server. there is tried using canvas2html library it don’t seem to work.

there is searched for vue-libaries that can take picture of particular element however there are only screenshot of whole web page.

mounted() {
// Element might not have been added to the DOM yet
this.$nextTick(() => {
// Element has been definitely added to the DOM
// is there any way to acces the div element via el element???
html2canvas(document.getElementById(‘container’)).
then(function(canvas) {
document.body.appendChild(canvas);
});
console.log(this.$el.textContent); // I’m text inside the component.
});
}

Solution :

I try html2canvas library and it seems work fine.

First make sure you already install the library:

npm install html2canvas

And in component:

async mounted () {
let el = this.$refs.hello.$el; // You have to call $el if the ref is vue.js component
this.output = (await html2canvas(el)).toDataURL();
}

Live Example

If you already using vue-html2canvas, you can do like:

async mounted() {
let el = this.$refs.hello.$el;
let options = { type: “dataURL” };
this.output = await this.$html2canvas(el, options);
}

Live Example

Note: It seems vue-html2canvas has a problem with babel, see Babel 6 regeneratorRuntime is not defined for how to fix it (in my example I simply import “regenerator-runtime/runtime”).

[Vue.js] $emit executes before computed

I’m trying to emit a prop that I modify. I can do that directly with the prop and it works but I get a vue.js Warn: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

So I tried to put the prop in a computed, but the emit executes before the computed is executed.

template:
<input
v-on:keyup=”validatedate(localDate)”
v-on:change=”emitAnswer(localDate)”
v-model=”localDate”>
,
computed: {
dateLocal: {
get: function () {
return this.date
}
}
methods: {
emitAnswer: function (date) {
this.$emit(‘myFunc’, date);
}
}

Solution :

Since vue.js can’t guarantee that v-model will be executed before the v-on:change, you can use watchers to only call the emit once the value of the property has been changed in the component, example:

watch {
date() {
this.$emit(‘myFunc’, this.date)
}
}

Solution 2:

Firstly, I believe the computed is named wrongly (“dateLocal” should be “localDate”), but I thing that is not the problem.

Why dont you check inside method right before emit if value is set?

methods: {
emitAnswer: function (date) {
if (date) {
this.$emit(‘myFunc’, date)
}
}
}

Also, for better practise, you should use sethandler for computed property you are about to modify:

computed: {
localDate: {
get () {
return this.date
},
set (date) {
if (date) {
this.$emit(‘myFunc’, date)
}
}
}
}

Hopefully this helps you, feel free to respond if you need further help.

Solution 3:

To avoid mutating a prop, its best to define a local data property that uses the prop as its initial value (source):

props: [‘date’],
data () {
return {
localDate: this.date
}
}

Now you can use the localDate data as v-model and you don’t need any parameter for the emitAnswer method:

//template
<input @change=”emitAnswer” v-model=”localDate”>

//script
props: [‘date’],
data () {
return {
localDate: this.date
}
},
methods: {
emitAnswer () {
this.$emit(‘myFunc’, this.localDate)
}
}

[Vue.js] Vuejs v-bind class not applying the classes dynamically

<button @click=”startEffect”> Start Effect</button>
<br/>
<div id=”effect” class=”highlight” :class=”{highlight: enableHighlight}”></div>

I just need the highlight class to be applied based on the data property enableHighlight but for some reason It doesn’t apply the class when the startEffect function is called.

there is debugged and confirmed that value of enableHighlight is switched when clicking the button and that the CSS classes are present. However upon clicking the button the class is not applied to the div.

Solution :

You really mess with vue.js when having a “normal” class attribute and one dynamic. Remove the normal one.
<div id=”effect” :class=”{highlight: enableHighlight}”></div>

To make it work, you need to remove the function in startEffect’s definition:

startEffect() {
this.enableHighlight = !this.enableHighlight;
}

Why? because this isn’t the same in the different ways to define the function. Learn more about this here.

Top 10 Web Skills

html5, css3, javascript, node.js, etc

[Vue.js] How can I get specific info depending on which project I click?

Solution :

[Vue.js] input range slider on thumb/pointer move complete fire event

Solution :

[Vue.js] Vue.js only displays 1 input field?

Solution :

[Vue.js] Translate text coming from the script using Vue-i18n

Solution :

[Vue.js] Why the path in the link changes and the transition to this address is not performed?

Solution :

[Vue.js] Making POST to DRF using Axios

Solution :

[Vue.js] How to take screen shot of a particular html div element in vue.js

Solution :

[Vue.js] $emit executes before computed

Solution :

Solution 2:

Solution 3:

[Vue.js] Vuejs v-bind class not applying the classes dynamically

Solution :