Hey guys I have this code that fetches data from database usin axios, and in the .then() function I set a data property, watch doesnt trigger. Here is some code that I currently have. And thank you in advance!
export default {
name: '..',
data() {
return {
autocompleteOn: false
}
},
watch: {
autocompleteOn(oldVal, newVal) {
console.log('autocomplet') // doesnt trigger this
}
},
methods: {
fetchAutocompleteResults: _.debounce((filter) => {
let $this = this;
let data = {
filter: filter,
page: $this.page
};
filter.resources.response = [];
filter.loading = true;
axios.post(BASE_URL + '/search/filter', data).then(function(response) {
if (response.data.length) {
filter.autocompleteOn = true;
$this.autocompleteOn = true;
filter.resources.response = filter.resources.response.concat(response.data);
$this.currentFilter = filter;
$this.page++;
console.log($this.autocompleteOn); // this is correct
}
filter.loading = false;
});
}, 300)
}
}
The debounce with an arrow function is making the this be something other than the Vue instance (e.g. window).
Instead of:
methods: {
fetchAutocompleteResults: _.debounce((filter) => {
Use:
methods: {
fetchAutocompleteResults: _.debounce(function (filter) {
// ^^^^^^^^ ^^^
Demo:
new Vue({
el: '#app',
data() {
return {
autocompleteOn: false
}
},
watch: {
autocompleteOn(oldVal, newVal) {
console.log('autocomplet') // doesnt trigger this
}
},
methods: {
fetchAutocompleteResults: _.debounce(function (filter) { // CHANGED from arrow function
let $this = this;
let data = {
filter: filter,
page: $this.page
};
filter.resources.response = [];
filter.loading = true;
// changed data for demo
data = [{title: 'foo', body: 'bar', userId: 1}];
// changed URL for demo
axios.post('https://jsonplaceholder.typicode.com/posts', data).then(function(response) {
if (response.data.length) {
filter.autocompleteOn = true;
$this.autocompleteOn = true;
filter.resources.response = filter.resources.response.concat(response.data);
$this.currentFilter = filter;
$this.page++;
console.log($this.autocompleteOn); // this is correct
}
filter.loading = false;
});
}, 300)
}
})
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.5/lodash.min.js"></script>
<div id="app">
<button #click="fetchAutocompleteResults({resources: {}})">fetchAutocompleteResults</button>
</div>
Related
I´m trying to dispatch an object which is created in a computed.
I can´t get it to work as I´m fairly new to vue.js
I want to dispatch the object "updateObject" to the vuex-store.
Tried with setters but didn´t work. I think if I can set the "varia" object to the same object like "updateObject" then I could maybe dispatch it?
Hope somebody can help me.
Here is my code:
<template>
<div class="detail">
<b-row align-v="center"><b-button variant="success" #click="submit()">submit</b-button></b-row>
// some more code...
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {
subID: '',
res: '',
showAlert: true,
varia: null
}
},
computed: {
...mapState([
'FA',
'Main',
'Sub',
'layouttype'
]),
getVariable: function (Sub, layouttype) {
const subID = this.layouttype.sub_id
var filterObj = this.Sub.filter(function (e) {
return e.sub_id === subID
})
console.log(filterObj)
return filterObj
},
updateObject: {
// getterfunction
get: function () {
var len = this.getVariable.length
var res = []
for (var i = 0; i < len; i++) {
if (i in this.getVariable) {
var val = this.getVariable[i].variable
res.push(val)
}
}
console.log(res)
var ergebnis = {}
res.forEach(key => {
if (this.FA[key]) {
ergebnis[key] = this.FA[key]
}
})
return ergebnis
},
// setterfunction
set: function (value) {
this.varia = value
}
}
},
methods: {
submit () {
this.$store.dispatch('sendData', this.ergebnis)
}
}
}
</script>
It tell´s me "this.ergebnis" is undefined
You can try it declaring "ergebnis" as global variable under data as
export default {
data () {
return {
subID: '',
res: '',
showAlert: true,
varia: null,
ergebnis : {}
}
},
computed: {
...mapState([
'FA',
'Main',
'Sub',
'layouttype'
]),
getVariable: function (Sub, layouttype) {
const subID = this.layouttype.sub_id
var filterObj = this.Sub.filter(function (e) {
return e.sub_id === subID
})
console.log(filterObj)
return filterObj
},
updateObject: {
// getterfunction
get: function () {
var len = this.getVariable.length
var res = []
for (var i = 0; i < len; i++) {
if (i in this.getVariable) {
var val = this.getVariable[i].variable
res.push(val)
}
}
console.log(res)
res.forEach(key => {
if (this.FA[key]) {
this.ergebnis[key] = this.FA[key]
}
})
return this.ergebnis
},
// setterfunction
set: function (value) {
this.varia = value
}
}
},
methods: {
submit () {
this.$store.dispatch('sendData', this.ergebnis)
}
}
}
Now ergebnis is accessible
I managed to recreate a MVC calorie tracker app from a course and I am trying to convert it to ES6 classes now.
I am a little stuck in understanding how to call the methods in the Module inside the Controller to return the items I need.
class Item {
constructor() {
this.data = {
items: [{
name: 'Salad',
calories: 200,
id: 0
},
{
name: 'Eggs',
calories: 500,
id: 1
}],
totalCalories: 0,
currentItem: null
}
};
getItems() {
return this.data.items
};
logData = () => {
console.log(data.items);
};
}
class App {
constructor(Item, UI) {
this.Item = Item;
this.UI = UI;
}
init() {
const items = Item.getItems();
UI.populateItemList(items)
}
}
const application = new App(new Item(), new UI())
When I try to call Item.logData() in the console it gives me TypeError: this.data is undefined.
I researched online and it seems that the method I declared is for the constructor only. How would I go about declaring methods that I'll use in the Controller or in any other class, just like I did below by returning a method out of the constructor?
What Im trying to convert initially looks like this:
const ItemCtrl = (function () {
const Item = function (id, name, calories) {
this.name = name;
this.id = id;
this.calories = calories;
}
const data = {
items: StorageCtrl.getStorage(),
totalCalories: 0,
currentItem: null
}
return {
getItems: function () {
return data.items
},
logData: function () {
return data;
}
}
const App = (function (ItemCtrl, StorageCtrl, UICtrl) {
return {
init: function () {
const items = ItemCtrl.getItems();
UICtrl.populateItems(items);
}
}
})(ItemCtrl, StorageCtrl, UICtrl);
App.init();
You need to initialise the controller first:
class App {
constructor(Item, UI) {
this.item = new Item();
this.UI = new UI();
}
init() {
const items = this.item.getItems();
this.UI.populateItemList(items)
}
}
I have method that changes data in itself, simple example:
Vue.component('component', {
template: '#component',
data: function () {
return {
dataToBeWatched: ''
}
},
methods: {
change: function (e) {
var that = this;
setTimeOut(function() {
that.dataToBeWatched = 'data changed';
}, 2000);
},
makeSmthWhenDataChanged: function () {
// ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
}
}
});
How to create such watcher using correct methods vue js?
Or I need to use props watching it in component?
Vue components can have a watch property which is an object. The object keys need to be the name of the prop or data that needs to be watched, and the value is a function that is invoked when the data changes.
https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property
Vue.component('component', {
template: '#component',
data: function () {
return {
dataToBeWatched: ''
}
},
methods: {
change: function (e) {
var that = this;
setTimeOut(function() {
that.dataToBeWatched = 'data changed';
}, 2000);
},
makeSmthWhenDataChanged: function () {
// ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
}
},
watch: {
dataToBeWatched: function(val) {
//do something when the data changes.
if (val) {
this.makeSmthWhenDataChanged();
}
}
}
});
there is a strange behavior in an argument inside a Global Javascript object:
I need to test my code with jasmine.js, but I can´t pass the expected value to the argument always return undefined in jasmine test.
//My model
myGlobalObject = function(){
_myCart = function(){
return {
total : 0,
products : []
}
}
return {
init: function(strangeArgument){
console.log(strangeArgument) //this return undefined in jasmine test
},
myCart : _myCart,
addProduct : function(Products){
return _myCart()
},
.....
}
}
The test:
const c{
empty : {
total: {
beforeVAT: 0,
afterVAT: 0,
VAT: 0
},
products: []
}
}
beforeEach(() => {
this.instance = myGlobalObject();
this.instance.init();
this.productWithoutQuantity = Object.assign({}, _.productA);
delete this.productWithoutQuantity.quantity;
this.productWithQuantity = Object.assign({}, _.productB);
});
test(`the cart should be empty`, () => {
expect(this.instance.getCart()).toEqual(c.empty);
});
.... more tests
And my main js:
var e = myGlobalObject();
var initialState = function (){
return {
total: {
beforeVAT: 0,
afterVAT: 0,
VAT: 0
},
products: []
}
}
e.init(initialState);
What its wrong?
Although I fail to completely understand the intent of the OP here, following is my take on the question
_myCart can be a local variable because it doesn't seem to serve any greater purpose, atleast from the code provided by OP
The call to instance.init can be with empty parenthesis or with a legitimate variable- depends on what OP is trying to achieve here.
I've included both main.js code snippet as well as testVariable.instance.init(); (on a simple note its undefined if it is undefined anyway as commented by #Bergi)
See it in action here
myGlobalObject = function() {
this._myCart = function() {
return {
total: 0,
products: []
}
}
return {
init: function(strangeArgument) {
console.log(strangeArgument)
},
myCart: this._myCart,
addProduct: function(Products) {
return this._myCart()
}
}
}
var e = myGlobalObject();
var initialState = function() {
return {
total: {
beforeVAT: 0,
afterVAT: 0,
VAT: 0
},
products: []
}
}
e.init(initialState);
describe('ajax test suite', function() {
var testVariable = {}
var c = {
empty: {
total: 0,
products: []
}
}
beforeEach(function() {
testVariable.instance = myGlobalObject();
testVariable.instance.init("hello");
testVariable.instance.init();
});
it('the cart should be empty', function() {
expect(testVariable.instance.myCart()).toEqual(c.empty);
});
});
I am building up a vue.js application for Shopify's JavaScript Buy SDK, but i am having problems with one variable not being updated.
Basically the shopClient variable is updated, but the shopCart stays null for some reason.
var vueApp = new Vue({
el: '#shopify-app',
created: function() {
this.setupShopAndCart();
},
data: {
shopCart: null,
shopClient: null,
},
methods: {
setupShopAndCart: function() {
this.shopClient = ShopifyBuy.buildClient({
apiKey: 'xxx',
domain: 'xxx.myshopify.com',
appId: '6'
});
if(localStorage.getItem('lastCartId')) {
this.shopClient.fetchCart(localStorage.getItem('lastCartId')).then(function(remoteCart) {
this.shopCart = remoteCart;
cartLineItemCount = this.shopCart.lineItems.length;
console.log(this.shopCart.checkoutUrl);
console.log("fetching");
});
} else {
this.shopClient.createCart().then(function (newCart) {
this.shopCart = newCart;
localStorage.setItem('lastCartId', this.shopCart.id);
cartLineItemCount = 0;
console.log(this.shopCart.checkoutUrl);
console.log("failing");
});
}
}, //setupShop end
}
});
You have a problem with scoping. this in the promise isn't the vue instance.
try this
var vueApp = new Vue({
el: '#shopify-app',
created: function() {
this.setupShopAndCart();
},
data: {
shopCart: null,
shopClient: null,
},
methods: {
setupShopAndCart: function() {
var self = this;
this.shopClient = ShopifyBuy.buildClient(
{
apiKey: 'xxx',
domain: 'xxx.myshopify.com',
appId: '6'
}
);
if(localStorage.getItem('lastCartId')) {
this.shopClient.fetchCart(localStorage.getItem('lastCartId')).then(
function(remoteCart) {
self.shopCart = remoteCart;
cartLineItemCount = self.shopCart.lineItems.length;
console.log(self.shopCart.checkoutUrl);
console.log("fetching");
}
);
} else {
this.shopClient.createCart().then(
function (newCart) {
self.shopCart = newCart;
localStorage.setItem('lastCartId', self.shopCart.id);
cartLineItemCount = 0;
console.log(self.shopCart.checkoutUrl);
console.log("failing");
}
);
}
}, //setupShop end
}
});
That stores the local vue instance in the self variable that is accessable to the promises allowing you to set the shopCart variable.
EDIT: As indicated lambda functions are correct if using ES2015 or newer
var vueApp = new Vue({
el: '#shopify-app',
created: function() {
this.setupShopAndCart();
},
data: {
shopCart: null,
shopClient: null,
},
methods: {
setupShopAndCart: function() {
this.shopClient = ShopifyBuy.buildClient(
{
apiKey: 'xxx',
domain: 'xxx.myshopify.com',
appId: '6'
}
);
if(localStorage.getItem('lastCartId')) {
this.shopClient.fetchCart(localStorage.getItem('lastCartId')).then(
(remoteCart) => {
this.shopCart = remoteCart;
cartLineItemCount = this.shopCart.lineItems.length;
console.log(this.shopCart.checkoutUrl);
console.log("fetching");
}
);
} else {
this.shopClient.createCart().then(
(newCart) => {
this.shopCart = newCart;
localStorage.setItem('lastCartId', this.shopCart.id);
cartLineItemCount = 0;
console.log(this.shopCart.checkoutUrl);
console.log("failing");
}
);
}
}, //setupShop end
}
});