Can I save Vue output as a Javascript array? - javascript

My Vue code below loads data from a database on page load. I know how to display it in a HTML file by using simple Vue methods. However, I want to save it as a Javascript array. The Javascript array will then be fed into a map (the map requires a Javascript array). Can I do so, and if so how?
var app = new Vue({
el: '#purchase',
mounted: function() {
this.allPurchases()
},
data: {
purchases: ""
},
methods: {
allPurchases: function(){
axios.get('http://localhost:3000/')
.then(function (response) {
console.log(response);
app.purchases = response.data;
})
.catch(function (error) {
console.log(error);
});
},
},
});

You should replace app.purchases by this.purchases :
var app = new Vue({
el: '#purchase',
mounted: function() {
this.allPurchases()
},
data() {
return{
purchases: []
}
},
methods: {
allPurchases: function(){
axios.get('http://localhost:3000/')
.then( (response) =>{
console.log(response);
this.purchases = response.data;
window.purchases = response.data;//to be used globally
})
.catch(function (error) {
console.log(error);
});
},
},
});

Simply change app.purchases = to this.purchases =

Related

Axios - cannot change variable data value

I tried to change the variable data using axios, i am using vue-axios and vue cli 3.
This is the code:
const qs = require('qs')
export default {
name: 'Home',
data: function () {
return {
email: null,
errEmail: false,
baseUrl: 'https://www.example.com/isemail.php'
}
},
methods: {
next: function () {
},
err: function () {
this.axios.post(this.baseUrl + 'functions/isEmail.php', qs.stringify({
value: this.email
}))
.then(function (resp) {
this.errEmail = true
})
}
}
}
<div v-if="errEmail">Target Success</div>
Actually i am trying change the errEmail variable depend on the server callback like this:
this.errEmail = resp.data.isemail
but using constant seems not working too.
Change this
.then(function (resp) {
this.errEmail = true
})
to this
.then((resp) => {
this.errEmail = true
})
Or manually bind this
.then(function (resp) {
this.errEmail = true
}.bind(this))

Cannot read property 'array_name' of undefined - Vue.js

I am trying to fetch data through Axios' request and push into an array. Here is my code:
props: [
'products',
],
data: function () {
return {
algolia: '',
products_data : [],
};
},
mounted() {
this.products_data = this.products;
}
methods: {
find () {
let new_product = {};
axios.get('/product/find?barcode=' + this.barcode)
.then(function (res) {
new_product.name = resp.data.name
new_product.barcode = resp.data.barcode
new_product.unit = resp.data.unit
this.products_data.push(new_product);
})
.catch(function (err) {
console.log(err);
})
},
}
I am getting the error Cannot read property 'products_data' of undefined sue to this line this.products_data.push(new_product); I am new in Vue. Any help would be highly appreciable.
Regards
this should work, i have removed function syntax and used arrow function.
find () {
let new_product = {};
axios.get('/product/find?barcode=' + this.barcode)
.then((resp) => {
new_product.name = resp.data.name
new_product.barcode = resp.data.barcode
new_product.unit = resp.data.unit
this.products_data.push(new_product);
})
.catch((err)=> {
console.log(err);
})
}

Accessing variable from outsite of axios post

I'm trying to access a variable inside of axios call, but it returns an undefined error. Please see my code below.
new Vue({
el: '#app',
data(){
return {
roles: [{ display: 'disp' }]
}
},
methods: {
axios.post('{{ route('role.add') }}', {
})
.then((response, roles) => {
console.log(this.roles);
})
.catch(function(err){
console.log(err);
});
}
})
Error
Undefined
Solution [SOLVED]
Added global variable above the Vue.
Try to access without this. I don't see any purpose for using this.
const axios = require("axios");
var a = "some value";
axios.get('http://www.google.com').then(function () {
console.log(a);
}).catch(e => {
console.log(e, "ERROR");
})
Just remove this keyword and it will work:
var roles = [{ display: 'disp' }];
axios.post('{{ route('role.add') }}', {
})
.then(function(response){
console.log(roles);
})
.catch(function(err){
console.log(err);
});
Or use arrow function which is not preferred:
var roles = [{ display: 'disp' }];
axios.post('{{ route('role.add') }}', {
})
.then((response, roles) => {
console.log(this.roles);
})
.catch(function(err){
console.log(err);
});

Access Vue Instance Using this

When I try to use this in my VueJs methods I get the following error
this is undefined
I think that I shouldn't use arrow functions because their this does not bind to the context I expect it to.
I try with a regular function and get the error above.
What I've tried so far
methods: {
connection(){
new elasticsearch.Client({...});
client.search({...})
.then(function (resp) {
var hits = resp.aggregations;
this.tmp = hits[1].value;
}, function (err) {
console.trace(err.message);
});
}
}
I cannot use the this that I want to in the functions passed to .search and .then . How can I have this bind to my VueJs instance so I can access data, computed, etc...?
You should use arrow function to save this context, and don't forget that inside Vue methods this refers to the current instance.
data() {
return {
counter:0,
connections:2,
tmp: 0,
}
},
methods: {
connection() {
// ...
var client = new elasticsearch.Client({
host: 'xxxxxxxxxxxx'
});
client.search({
[...]
}).then((resp) => {
var hits = resp.aggregations;
this.tmp = hits[1].value;
}, (err) => {
console.trace(err.message);
});
}
}
You can assign this variable to local variable(self) and use it in .then function
data () {
return {
counter:0,
connections:2
}
},
methods: {
connection(){
var self = this;
var tmp=0
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client({
host: 'xxxxxxxxxxxx'
});
client.search({
"index":"400000",
[...]
}
}).then(function (resp) {
var hits = resp.aggregations;
self.tmp=hits[1].value;
}, function (err) {
console.trace(err.message);
});
console.log("tmp:",tmp)
}
}

Passing data properties in vue js laravel component

Am new to Vue.js and I would like to pass the data propert value to my template.
I have:
export default {
name: "profile",
data: () => ({
user:[]
}),
mounted() {
axios
.get('/api/user')
.then(function (response) {
this.user = response
})
.catch(function (response) {
console.error(response);
});
}
}
In the HTML template I have:
<template>
<div>{{user.name }}</div>
</template>
Now I am getting an error of
cannot set property user of undefined
A console.log(response) produces:
name: "user 1", // name exists
email ...
Try using arrow function for axios callbacks
.then((response) => {
this.user = response
})
arrow function binds the components context as you expect.
In mounted:
mounted() {
var self = this;
axios.get('/api/user')
.then(function (response) {
self.user = response
})
.catch(function (response) {
console.error(response);
});
}
}

Categories