I am trying to pass a Vue function to the lodash throttle method. Shouldn't I just be able to do something like this?
When I am trying to do this I am getting the following error:
Error in callback for watcher "query": "TypeError: Expected a function"
Watcher
watch: {
query() {
throttle(this.autocomplete(), 400);
}
}
Methods
methods: {
autocomplete() {}
}
Even though I am passing a function reference I am still getting an error message. If I wrap it with a anonymous function it won't fire:
throttle(() => { this.autocomplete(); }, 400);
I just checked and the autocomplete function does actually seem to fire regardless of the error that it is not a function in my example at the top.
What is going wrong here?
Edit:
Jsfiddle: http://jsfiddle.net/yMv7y/2780/
You are passing the return value of this.autocomplete() (maybe undefined) and not the function reference. If you want to do the latter, you have to omit the brackets:
watch: {
query() {
throttle(this.autocomplete, 400);
}
}
Working approach:
var demo = new Vue({
el: '#demo',
data: {
query: ''
},
watch: {
query: function() {
this.autocomplete()
}
},
methods: {
autocomplete: _.throttle(function() {
console.log('test');
}, 50)
}
})
<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="demo" v-cloak>
<input type="text" v-model="query">
</div>
As #Bill Criswell commented,
This is creating a throttled function every time query changes. You
want to constantly call the same throttled function like the answer
below.
My guess is that you need to define the throttled function with a non-invoked callback in a variable, and then invoke that as a function:
var throttled = throttle(this.autocomplete, 400)
watch: {
query() {
throttled();
}
}
Just spent quite awhile trying to figure that one out...
Related
I am trying to catch the user started typing, and stopped typing using the debounce function. I tried Lodash and Underscore.js.
On my textArea
v-on:keyup="handler($event)"
handler: function(e) {
this.e = e
if(this.canPublish) {
this.setCanNotPublish()
this.doStuff()
}
var debounceFunction = _.debounce(this.doneTyping(), 5000)
debounceFunction(e)
},
I am getting really frustrated about this. In pure JavaScript I made the test work. But with Vue.js where it uses v-on events, data, methods ...etc., I am not able to make it work.
Method doneTyping
doneTyping: function () {
console.log('done typing....')
}
}
Method doStuff
doStuff: function () {
console.log('started typing....')
}
The intended behaviour is: first the user started typing in the textArea, and it starts the doStuff. And if the user keeps typing in a period shorter than 5 seconds, it will not trigger doStuff again because canPublish is a boolean. Next the user stops typing and then the debounce func is done, and doneTyping fires.
I would do with this two debounced functions, one for started typing which triggers on the leading edge, and one for stopped typing which triggers on the trailing edge.
new Vue({
el: '#app',
created() {
this.startedTyping = _.debounce(this.startedTyping, 5000, {
leading: true,
trailing: false,
})
this.stoppedTyping = _.debounce(this.stoppedTyping, 5000, {
leading: false,
trailing: true,
})
},
methods: {
handleKeydown() {
// This triggers on the leading edge
this.startedTyping()
// This triggers on the trailing edge (after 5s)
this.stoppedTyping()
},
startedTyping() {
console.log('started typing')
},
stoppedTyping() {
console.log('stopped typing')
},
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script>
<div id="app">
<textarea #keydown="handleKeydown"></textarea>
</div>
Your code is wrong because you are creating a new debounced function every time the handler is called. You need to have only one debounced function instance that you call each time. It's best to create the debounced function in the created hook.
I often see code like this:
methods: {
myDebouncedFunc: _.debounce(function () {
// Do stuff
}, 1000)
}
This is technically not wrong, but you may not realize that the debounced function will be shared across all instances of that component, which may not be what you want. It's usually best to create the debounced function in the created hook so that each instance of the component gets its own independent debouncing tracking.
Here's how to debounce your method.
doneTyping: _.debounce(function (e) {
console.log('done typing....')
}, 5000)
Then you use it like
handler: function(e) {
this.e = e
if(this.canPublish){
this.setCanNotPublish()
this.doStuff()
}
this.doneTyping() // function is debounced
},
In main.js i created the eventBus
Vue.prototype.$eventHub = new Vue()
And in component1
this.$eventHub.$emit('logged-in')
In component2, i tried this
beforeMount () {
this.$eventHub.$on('logged-in', function () {
console.log("logged in")
})
},
beforeDestroy() {
this.$eventHub.$off('logged-in')
}
It is not printing any thing in the console. If i remove this.$eventHub.$off('logged-in') it is working fine, but it is executing number of times that$emit is executed. What am i doing wrong here? why $off is not working?
Unable to pass the parameters as well
trying to send message using $emit
this.$eventHub.$emit('logged-in', "some message")
in $on
this.$eventHub.$on('logged-in', this.testEvent)
The test event method looks
testEvent (params) {
console.log(params)
}
The params shows undefined.
But if i do this, it is working fine
this.$eventHub.$on('logged-in', (params) => {
console.log(params)
})
How can i pass parameters to the method?
You should pass a reference to $off
beforeMount () {
this.$eventHub.$on('logged-in', this.onEventHandler)
},
beforeDestroy() {
this.$eventHub.$off('logged-in', this.onEventHandler)
},
methods: {
onEventHandler () {
console.log("logged in")
}
}
I'm trying to build a simple app in vue and I'm getting an error. My onScroll function behaves as expected, but my sayHello function returns an error when I click my button component
Property or method "sayHello" is not defined on the instance but
referenced during render. Make sure to declare reactive data
properties in the data option. (found in component )
Vue.component('test-item', {
template: '<div><button v-on:click="sayHello()">Hello</button></div>'
});
var app = new Vue({
el: '#app',
data: {
header: {
brightness: 100
}
},
methods: {
sayHello: function() {
console.log('Hello');
},
onScroll: function () {
this.header.brightness = (100 - this.$el.scrollTop / 8);
}
}
});
I feel like the answer is really obvious but I've tried searching and haven't come up with anything. Any help would be appreciated.
Thanks.
But for a few specific circumstances (mainly props) each component is completely isolated from each other. Separate data, variables, functions, etc. This includes their methods.
Thus, test-item has no sayHello method.
You can get rid of the warning by using .mount('#app') after the Vue instance rather than the el attribute.
Check the snippet below;
var app = new Vue({
data: {
header: {
brightness: 100
}
},
methods: {
sayHello: function() {
console.log('Hello');
},
onScroll: function () {
this.header.brightness = (100 - this.$el.scrollTop / 8);
}
}
}).mount('#app');
Please note; the following might not be necessary but did it along the way trying to solve the same issue: Laravel Elixir Vue 2 project.
im just using Vue.js to updates posts on a site im messing around with, this is what ive got so far (im still learning javascript, and not too great at it)
[app.js]
var Vue = require('vue');
Vue.use(require('vue-resource'));
var app = new Vue({
el: '#app',
components: {
'postlist' : require('./components/postlist/postlist.js')
}
});
[postlist.js]
module.exports = {
template: require('./postlist.template.html'),
data: function () {
return {
'search': '',
'posts' : {}
}
},
methods: {
'updatePosts' : function()
{
this.$http.get('api/posts', function(responce, status, request)
{
this.$set('posts', responce.data);
});
}
}
};
What I'm looking for is to have updatePosts fire off every x seconds, how do I do this?
ive tried doing this in the app.js
setInterval(function()
{
app.components.postlist.methods.updatePosts(); // doesnt work
app.postlist.updatePosts(); //doesnt work either
}, 500);
and tried putting the setInterval into the component itself
im pretty lost with this, whats the best way to achieve this?
updatePosts running every x seconds?
I have also trouble with scopes in Vue.
this should work
module.exports = {
template: require('./postlist.template.html'),
data: function () {
return {
'search': '',
posts: {}
}
},
methods: {
updatePosts: function () {
var self = this;
self.$http.get('api/posts', function(responce, status, request) {
self.posts = responce.data;
setTimeout(function(){ self.updatePosts() }, 2000);
});
}
},
created: function () {
this.updatePosts();
}
}
Functions in Vue works kinda different way, because your method updatePosts is not regular function. It is function defined in $vm.methods object. so It can't be called regularly like setTimeout($vm.updatePosts). Actually $vm.updatePosts doesn't exists. if you called it like $vm.updatePosts() it is different story. $vm instance automatically calls its method... So correct way is setTimeout(function(){ self.updatePosts() },2000)
You could start the request cycle in created or somewhere else in the lifecycle. It's also probably better to use recursion here so you can wait for the response to come back before you send off another one. I didn't test this code fully but it should work.
module.exports = {
template: require('./postlist.template.html'),
data: function () {
return {
'search': '',
posts: {}
}
},
methods: {
updatePosts: function () {
this.$http.get('api/posts', function(responce, status, request) {
this.posts = responce.data;
setTimeout(this.updatePosts, 2000);
});
}
},
created: function () {
this.updatePosts();
}
}
I have a listener setup in my componentDidMount:
updateBasketTotal: function() {
BasketService.getBasketTotal(function(data){
this.setState({
selectedPeopleCount: data.TotalMembers
});
}.bind(this));
},
componentDidMount: function() {
this.updateBasketTotal();
this.subscribeToChannel(basketChannel,"selectAll",this.listenerSelectAll);
this.subscribeToChannel(basketChannel,"removePersonFromBasket",this.listenerRemovePersonFromBasket);
this.subscribeToChannel(basketChannel,"addPersonToBasket",this.listenerAddPersonToBasket);
this.subscribeToChannel(basketChannel,"addArrayToBasket",this.listenerAddArrayToBasket);
},
listenerAddArrayToBasket: function(data){
BasketService.addPerson(data.arrayToPush,function(){
this.updateBasketTotal();
});
},
listenerAddPersonToBasket: function(data){
BasketService.addPerson(data.personId,function(){
this.updateBasketTotal();
});
},
listenerRemovePersonFromBasket: function(data){
BasketService.removePerson(data.personId,function(){
this.updateBasketTotal();
});
},
listenerSelectAll: function(data){
BasketService.selectAll(data.selectAll, function () {
this.updateBasketTotal();
});
}
However, if I publish a message when I'm not on this page, I get an error:
this.updateBasketTotal is not a function
Can anyone please tell me how I can use this.updateBasketTotal?
I think its a problem with 'this' but not sure how to fix it. Thanks in advance
UPDATE:
Have tried adding bind() to the listener:
listenerAddPersonToBasket: function(data){
BasketService.addPerson(data.personId,function(){
this.updateBasketTotal();
}.bind());
},
But no joy, any ideas?
I assume your component is unsubscribing to those channels in componentWillUnmount to avoid resource leaks and duplicate subscriptions.
The asynchronous callbacks should call isMounted to ensure the component is still mounted before attempting anything else.
BasketService.selectAll(data.selectAll, function () {
if (this.isMounted()) {
this.updateBasketTotal();
}
}.bind(this));
I don't know if the isMounted check will solve your problem since that may also not be a function anymore. If it isn't, you might consider adding your own property to track whether the component is mounted or not and check that rather calling a function.
listenerAddArrayToBasket: function(data) {
var _this = this;
BasketService.addPerson(data.arrayToPush,function() {
_this.updateBasketTotal();
});
}
or
listenerAddArrayToBasket: function(data) {
BasketService.addPerson(data.arrayToPush,function() {
this.updateBasketTotal();
}.bind(this));
}
React does not bind context by default, you have to do it yourself. In your example this would refer to callback function, not to react object.
You can either assign react context to a variable and use it inside your callback, or bind context directly to callback.
Here is the great article explaining contexts in JavaScript
Also in ES6 it's possible to use double arrow declaration
class SomeComponent extends React.Component {
updateBasketTotal() {
....
}
lisneterAddArrayToBasket() {
BasketService.addPerson(data.arrayToPush, () => {
this.updateBasketTotal()
})
}
}
You can use babel to compile your ES6 code to old plain ES5 :)