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);
?
Related
I have resize event in my mounted() works well.
data() {
return {
...
eventHandler: null,
};
},
mounted() {
this.eventHandler = window.addEventListener("resize", () => {
console.log("resize");
});
},
but when I tried to remove the resize listener on unmount()
beforeUnmount() {
console.log("unmonunted");
window.removeEventListener("resize", this.eventHandler);
},
the resize event is still firing
Anyone know how to solve this?
window.addEventListener returns undefined, not the event handler function.
You should change your code like this:
data() {
return {};
},
mounted() {
window.addEventListener("resize", this.eventHandler);
},
beforeUnmount() {
window.removeEventListener("resize", this.eventHandler);
},
methods: {
eventHandler() {
console.log("resize");
}
}
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,
}
}
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 a question related to this question and this answer but they don't solve my question completely. I'm using vue and apexcharts and I would like to return a value or update a variable from an event. Is it possible to return something instead of printing it in the console?
Something like this:
events: {
dataPointSelection: function (event, chartContext, config) {
this.active = this.series[config.seriesIndex];
}
}
The problem that I face is that "this" makes reference to the overall vue component and therefore "series" and "active" cannot be found.
Here is the code that gives me"TypeError: this.series is undefined" when I click on a point data. The series data I get from the parent component and it looks like this:
[{"name":"S-1","data":[[2.65,100], [6.67,100]]}, {"name":"S-2","data":[[0,50],[2.65,50]]}]
<script>
import VueApexCharts from 'vue-apexcharts';
export default {
name: "myGraph",
components: {
apexchart: VueApexCharts,
},
props: {
series: {}
},
data: () => ({
active: undefined,
chartOptions: {
chart: {
width: '100%',
animations: {
enabled: false
},
events: {
dataPointSelection: function (event, chartContext, config) {
this.active = this.series[config.seriesIndex];
}
}
},
tooltip: {
intersect: true,
shared: false
},
markers: {size: 1},
}
}),
}
}
</script>
The idea is that on dataPointSelection, it should activate that serie in order to access later on other information that will be store in that object.
The easiest way is to bind the event directly in the component
<apexchart type="bar" #dataPointSelection="dataPointSelectionHandler"></apexchart>
methods: {
dataPointSelectionHandler(e, chartContext, config) {
console.log(chartContext, config)
}
}
Another way is to use ES6 arrow functions in your chart configuration
computed: {
chartOptions: function() {
return {
chart: {
events: {
dataPointSelection: (e, chart, opts) => {
// you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
this.VueDemoMethod();
}
}
},
}
}
}
I think this is simply what you are looking for
chart: {
type: 'area',
events: {
dataPointSelection(event, chartContext, config) {
console.log(config.config.series[config.seriesIndex])
console.log(config.config.series[config.seriesIndex].name)
console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
}
}
}
if you need by the click, this is better
chart: {
type: 'area',
events: {
click(event, chartContext, config) {
console.log(config.config.series[config.seriesIndex])
console.log(config.config.series[config.seriesIndex].name)
console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
}
}
}
source How to access value on dataPointSelection function of Apexchart
documentation events https://apexcharts.com/docs/options/chart/events/
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!
}
}