I am working on vue app. The issue I am facing here is that I want to run a method if props has value and in my case manager value. So I am trying something like this but the debugger is not called in the watcher. Please help me find where I am going wrong.
<script>
export default {
props: ['manager'],
watch: {
manager: function (value) {
debugger
if(value) {
this.validationManager();
}
}
},
methods: {
validationManager(){
console.log("Hello")
}
}
};
</script>
We can definetely watch the props, please try this:
watch: {
manager: {
// the callback will be called immediately after the start of the observation
immediate: true,
handler (val, oldVal) {
//do your stuff here
this.validationManager();
}
}
}
You forget the deep attribute for watcher
watch: {
manager: {
handler(value){
if(value) {
this.validationManager();
}
},
immediate: true,
deep: true,
}
}
Related
I am trying to see if I can use a watcher method to look for a change in a computed property rather than watching the individual store properties here. Would that work or can they only be used on data properties and props?
computed: {
optionsTrue() {
return this.$store.getters.getOption1IsTrue && this.$store.getters.getOption2IsTrue
}
},
watch: {
optionsTrue(newVal) {
// would this work to check when the value of the computed property has changed or can watcher only watch data properties?
}
}
Working code
computed: {
completed: function () {
return this.required && this.textAnswer !== '';
},
},
watch: {
completed: function(val) {
console.log(val)
}
}
On my website I have a few intervals and timeouts set, for things such as a carousel. Now I do clear them on the components destroyed() lifecycle hook. But I am still getting this build warning.
This is an example of one of my components
<script>
data() {
return {
carouselInterval: null
}
},
created() {
this.startInterval();
},
methods: {
startInterval() {
this.carouselInterval = setInterval(() => {
...
}, 5000);
}
},
destroyed() {
clearInterval(this.carouselInterval);
}
</script>
I also have a timeOut like so
<script>
data() {
return {
testTimeout: null
}
},
created() {
this.startTimeout();
},
methods: {
startTimeout() {
this.testTimeout = setTimeout(() => {
...
}, 5000);
}
},
destroyed() {
clearTimeout(this.testTimeout);
}
</script>
Now I would assume this would clear these timing functions but, I am still getting this warning.
Is there something I am doing wrong? Is there another way to clear all timing functions on build?
EDIT
I am 100% sure I have cleaned up all timing functions on the destroyed() lifecycle hook
The destroyed() lifecycle hook does not get called whilst using SSR. You can read more about this here SSR component lifecycle hooks
This means you can not use it to clear timeouts on the server.
You can solve this issue by moving your interval functions to either be called in the mounted() or beforeMount() lifecycle hooks since they are only called on the client side.
In your example you can change your code to be
<script>
data() {
return {
carouselInterval: null
}
},
mounted() {
this.startInterval();
},
methods: {
startInterval() {
this.carouselInterval = setInterval(() => {
...
}, 5000);
}
}
</script>
This will prevent the nuxt.js build from timing out.
I have this Vue component:
methods: {
...
toggleTyping: function () {
this.composing = !this.composing;
},
...
},
data: function () {
return {
composing: false,
};
},
watch: {
composing: function (val) {
alert(val);
}
}
When I execute toggleTyping() the watcher is not called. I'm very new to vuejs.
Everything you are showing works. The error must lie elsewhere.
new Vue({
el:"#app",
methods: {
toggleTyping: function() {
this.composing = !this.composing;
},
},
data: function() {
return {
composing: false,
};
},
watch: {
composing: function(val) {
alert(val);
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<button #click="toggleTyping()">Toggle</button>
</div>
Well, thanks everyone, the problem was really weird, I had a function also declared in the body of the component called type (it was making a typing animation, so I choose that name). When I renamed that function it started to work!
I put the failing code to clarify and help anyone else:
....
,
type : function () {
...
},
watch: {
composing: function (val) {
alert(val);
//Never called!
}
}
I have a component, and I simply cannot get
window.addEventListener("scroll", function(){
console.log('scrolling');
});
to fire - I've tried to attach it to the created and mounted lifecycle hooks, however, it doesn't print to the console when scrolling.
At the moment I have the following, but still no luck. It fires the console.log("My Method") but not the scroll :(
export default {
data() {
return {
}
},
components: {
},
methods: {
myMethod(){
console.log("my method");
window.addEventListener("scroll", function(){
console.log('scrolling');
});
}
},
created() {
console.log("created");
},
mounted(){
console.log("mounted");
this.myMethod();
}
}
Have you tried this:
window.addEventListener("scroll", function () {
console.log("scroll");
}, true);
?
I have component with watcher
props: {
propShow: { required: true, type: Boolean }
},
data() {
return {
show: this.propShow
}
},
watch: {
propShow: {
handler: (val, oldVal) => {
this.show = val;
}
}
}
Whenever parent component changes propShow this component must update it's show property. This component also modifies show property, that's why I need both: show and propShow, because Vue.js does not allow to change properties directly.
This line
this.show = val;
causes error
TypeError: Cannot set property 'show' of undefined
because this inside handler is undefined.
Why?
You will have to use function syntax here, as warned in the docs here:
Note that you should not use an arrow function to define a watcher (e.g. searchQuery: newValue => this.updateAutocomplete(newValue)). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.updateAutocomplete will be undefined.
So your code should be:
watch: {
propShow: {
handler: function(val, oldVal) {
this.show = val;
}
}
}
"function" is not es6 code, you should better write:
watch: {
propShow: {
handler(val, oldVal) {
this.show = val;
}
}
}