Here is a very simple Vuejs component which attempts to capture the click event of a span:
nativeOn: {
click: function (event) {
alert('clicked')
}
},
… and here's the demo, but it does not work, what I'm missing here?
As you are registering the event on span element, you have to use on option as follows:
Vue.component('hello', {
render: function(createElement) {
return createElement("span", {
on: {
click: function(event) {
alert('clicked')
}
},
}, "Hello ")
}
})
see a live demo on jsfiddle.
Related
I'm using Nuxtjs for my project. I need to logout the user if there is not active after a given time frame. I'm creating a new component name autologout.vue and add this code to it
autologout.vue
<template>
<div>
hello
<div v-if="warningZone">warning</div>
</div>
</template>
<script>
export default {
data() {
return {
events: ['click', 'mousemove', 'mousedown', 'scroll', 'keypress', 'load'],
warningTimer: null,
logoutTimer: null,
warningZone: false,
}
},
mounted() {
this.events.forEach(function (event) {
window.addEventListener(event, this.resetTimer())
}, this)
this.setTimers()
},
destroyed() {
this.events.forEach(function (event) {
window.removeEventListener(event, this.resetTimer())
}, this)
this.resetTimer()
},
methods: {
setTimers() {
this.warningTimer = setTimeout(this.warningMessage(), 4 * 1000)
this.logoutTimer = setTimeout(this.logoutuser(), 10 * 1000)
this.warningZone = false
},
warningMessage() {
this.warningZone = true
},
logoutuser() {
this.$auth.logout('local').then((data) => {
console.log(data)
})
},
resetTimer() {
clearTimeout(this.warningTimer)
clearTimeout(this.logoutTimer)
this.setTimers()
},
},
}
</script>
<style></style>
add import this component to layout->default.vue. I'm not using default.vue layout to my login page. after I'm login and redirect to the home page it always logout me. What is wrong?
I'm using this tutorial to implement this
Tutorial link
Although it is not a perfect way to handle the problem, but if you remove the parentheses present inside the addEventListener function, it will start working.
Change
window.addEventListener(event, this.resetTimer())
To
window.addEventListener(event, this.resetTimer)
And if you remove the paratheses from removeEventListener, it will again stop working. Don't know why.
App.vue
<HeaderPart></HeaderPart>
<router-view />
<PlayerBar v-if="audio"></PlayerBar>
I want to Hide/Show this PlayerBar using functions, In main.js i have created all the function to alter the value of audio.
Vue.mixin({
data: function() {
return {
baseURL: "https://sampleurl",
authToken: "sampleauth",
watch: false,
audio: true
};
},
methods: {
playaudio(item) {
window.Amplitude.playNow(item);
},
playvideo() {
this.audio = false;
this.watch = true;
console.log(this.audio);
},
stopvideo() {
this.watch = false;
this.audio = true;
console.log(this.audio);
}
},
computed: {
...mapGetters({
cur_user: "user"
})
}
});
So Whenever playvideo, the Playerbar will be hidden, and when he close video, playerbar will be shown. in Console.log, Values are coming fine, Audio is changing to true/false but playerbar not getting hidden on frontend
try v-show instead of v-if
<PlayerBar v-show="audio"></PlayerBar>
It might the naming conflict with the Vue component "watch" option (Vue watch option)
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 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 am fairly new to Vue.js and I might be thinking about this the wrong way, in which case I would really appreciate the help.
I have a component defined as below:
Vue.component('btn', {
data() {
return {
active: false
};
},
props: ['type', 'msg'],
template: "<button class='btn__{{ type }}'><div class='la-ball-scale-multiple' v-show='active'><div></div><div></div><div></div></div>{{ msg }}</button>",
methods: {
start: function() {
this.active = true;
},
stop: function() {
this.active = false;
}
}
});
and I can add the btn component multiple times on any document, like this:
<btn type="primary" msg="Submit" #click="test"></btn>
When I click on it, it should do whatever is defined in test, which is in the root vue instance as a method.
However, I want to call the component's method, start in the test method. I also want to be able to call the component's stop method when I am done with the code logic inside test.
I don't think exposing the methods as events within the component and then calling this.$broadcast is a solution because, if I have two components, both of them seem to set active to true with this solution.
Any help please?
You could pass in your test function as a prop (called onclick for example) and then pass the context of your btn component as an argument to the test function. That way, you could access start and stop.
test:
test: function(e, btn) {
btn.start();
// ...
btn.stop();
}
btn:
Vue.component('btn', {
data() {
return {
active: false
};
},
props: ['type', 'msg', 'onclick'],
template: "<button class='btn__{{ type }}' #click="btnClick($event)"><div class='la-ball-scale-multiple' v-show='active'><div></div><div></div><div></div></div>{{ msg }}</button>",
methods: {
start: function() {
this.active = true;
},
stop: function() {
this.active = false;
},
btnClick: function(e) {
this.onclick(e, this); // call your onclick handler in the context of this component
},
}
});
custom element:
<btn type="primary" msg="Submit" :onclick="test"></btn>
Have a look at the JSFiddle:
https://jsfiddle.net/2a5os24x/6/