Is there any solution to use lodash debounce on method? I also need 'this' in the function.
Example:
data() {
info: 'Read Me!'
},
methods: {
readData() {
console.log(this.info)
}
}
In Vue2 I could use:
methods: {
readData: debounce(function() {
console.log(this.info)
}, 500)
}
Your data property should be a function that returns an object :
data() {
return{
info: 'Read Me!'
}
},
and write your method by giving a name to the debounce callback :
methods: {
readData: debounce(function debounceRead() {
console.log(this.info)
}, 500)
}
Related
Is it possible what I am trying to achieve here to use a value from an object as a method name?
This works great:
Vue.mixin({
methods: {
name: function () {
console.log('hello')
}
}
});
But this:
options = {
methodName: 'name'
};
const method = options.methodName;
Vue.mixin({
methods: {
method: function () {
console.log('hello')
}
}
});
Gives me the following error:
Property or method "name" is not defined on the instance but referenced during render.
Vue.mixin({
methods: {
[method]: function () {
console.log('hello')
}
}
});
will work. And you can spare assigning a constant by using
methods: {
[options.methodName]: function() {...}
}
I have a vue component like below.
And I want to use watch for a specific keyword not everything.
So I made a computed function to focus it.
The code below works very well.
var vm = new Vue({
el: '#app',
computed: {
foo() {
return this.item.foo;
}
},
watch: {
foo() {
console.log('Foo Changed!');
}
},
data: {
item: {
foo: 'foo'
}
}
})
And I applied to my example. In this case, it doesn't work well. So I guess it should be used by 'deep: true' inside of 'changedOptions' of watch. But I don't know how can I use 'deep' inside of a function.Could you recommend some solutions?
data(){
return {
deliveryOptions: {
weight: 3,
options: { express: false, shuttle: false, bike: true, walk: false },
},
computed: {changedOptions() {
return this.deliveryOptions.options;
}
},
watch: {
changedOptions(){
console.log('changed')
}
}
Computed only runs when you use computed value somewhere.
you can either use it in the template part or in the script.
lets us use it in mounted like below
mounted () {
console.log(this.changedOptions)
// this will call the computed to return the value.
}
if the watcher still doesn't run then you can try immediate: true in watcher like below
watch: {
changedOptions: {
immediate: true,
handler () {
console.log('changed')
}
}
}
I have a method "aggiornaQuantity" in this component that i would use in my vue. How can i do?
Obviously I did various tests without any success
Vue.component('todo-item', {
props: ['todo'],
template: '...',
methods:
{
aggiornaQuantity: function()
{
return this.todo.quantity = this.value ;
}
}
var app7 = new Vue
(
{
el: '#app-7',
data:
{
message: '${Message}',
risultato: true,
groceryList: [],
product: '',
selected: '',
},
methods:
{
.....
}
Edit: I'm not sure if you want to know how to use the function or why your function doesn't work (as commented above). If it's the former, here's the answer:
You have to call it in one of the lifecycle instances. Most of the time, we call it in mounted().
...
methods: {
foo () {
// do something
},
},
mounted() {
this.foo();
},
...
I want to watch a prop which is an object so i have
<script>
export default {
watch:{
filter: {
handler:(newval)=> {
console.log("i have new data",newval) //this works
this.fetchData(); //throws an error
},
deep: true
}
},
props:{
filter:{
type:Object,
required:true
}
},
data: () => ({
pagination: {},
items: []
}),
methods:{
fetchData(){
console.log("am fetching the data");
}
}
}
The above watcher works as the console.log displays the new value but i cannot execute a method as on the watch am getting an error Error in callback for watcher "filter": "TypeError: _this.fetchData is not a function". How can i execute a method on a deep watcher.
Move Arrow function to simple function for handler method. Change handler:(newval)=> { to handler: function (newval) {:
Vue.js docs:
Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()).
handler: function (newval) {
console.log("i have new data",newval) //this works
this.fetchData(); // it should work
},
I have 2 components. How can I call fetchProjectList() method in createProject() method.
First component:
Vue.component('projects', {
template: '#projects-template',
data: function () {
return {
list: []
}
},
ready: function () {
this.fetchProjectList();
},
methods: {
fetchProjectList: function () {
resource.get().then(function (projects) {
this.list = projects.data;
}.bind(this));
}
}
});
Second component
Vue.component('createProjects', {
template: '#create-projects-template',
methods: {
createProject: function () {
resource.save({}, {name: this.name}).then(function () {
this.fetchProjectList()
}.bind(this), function (response) {
// error callback
});
}
}
});
You don't, or rather you shouldn't. components should not depend on other components in such a direct way.
You should either extract this method into a mixin, or keep it in it's own object which you import into each component.
Read up on the store pattern: http://vuejs.org/guide/application.html#State_Management