I have component
and i want run method after click
<my-component #click="showOtherDiv"></my-component>
i have this method on main app methods
var app = new Vue({
el: '#app',
data: {},
methods: {
showOtherDiv : function(){
alert('Some message');
}
}
});
but seems like "click" not works on full component
Register your component, and declare the handler method inside:
Vue.component('my-component', {
// ...
methods: {
showOtherDiv : function(){
alert('Some message');
}
}
});
Add the .native modifier to the event name:
<my-component #click.native="showOtherDiv"></my-component>
From the docs:
Binding Native Events to Components
[…] when you want to listen for a native event on the root element of a component […] you can use the .native modifier for v-on.
Related
Trying to rewrite the following code to vue 3 composition api.
I need to listen an event from child in component that uses render function.
$on removed in vue 3.
Don't know how to replace $on in setup method.
created() {
this.$on('update-visibility', this.updateElementBounds);
}
Call context
// ...
methods: {
updateElementBounds() {
const {offsetTop, offsetHeight} = this.$el;
this.elementTop = offsetTop;
this.elementHeight = offsetHeight;
},
},
created() {
this.$on('update-visibility', this.updateElementBounds);
},
render() {
const {isPageFocused, isElementFocused} = this;
return this.$scopedSlots.default({
isPageFocused,
isElementFocused,
});
},
The composition API setup function has no access to the dom directly.
Use the v-on directive on the child that emits the event in the template. Use the function you want to call when the event is thrown as value.
<child v-on:updateVisibility="updateElementBounds" ></child>
Just started learning Vue yesterday and I love it. I'm trying to trigger an event when a user clicks on an anchor with a phone number:
var phoneNumbers = new Vue({
el: "a[href^='tel:']",
methods: {
onClick() { console.log('a phone number was clicked'); }
}
})
The issue is, I would like to (in this particular case), not have to add v-on:click="" to the actual element. This is because I'm dealing with a CMS where users may add links to phone numbers where they wouldn't be adding the vue attributes to the markup.
Any way of accomplishing this?
Thanks!
You have a reference to the component's root DOM element via this.$el.
You can add a click listener in the mounted hook (you'll also need to remove the listener in the destroyed hook as well):
mounted() {
this.$el.addEventListener('click', this.onClick);
},
destroyed() {
this.$el.removeEventListener('click', this.onClick);
}
Here's a working example:
Vue.config.productionTip = false;
Vue.config.devtools = false;
var phoneNumbers = new Vue({
el: "a[href^='tel:']",
methods: {
onClick() {
console.log('a phone number was clicked');
}
},
mounted() {
this.$el.addEventListener('click', this.onClick);
},
destroyed() {
this.$el.removeEventListener('click', this.onClick);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
555-555-5555
I'm trying to append a click event to an already existing dom element.
<div class="logMe" data-log-id="{{ data.log }}"></div>
...
<div id="events"></div>
I can't seem to access outside vue methods within my jquery click handler. It will throw logData is not defined.
new Vue({
el: '#events',
mounted() {
$('.logMe').on('click', function() {
const data = $(this).data('log-id');
this.logData(data); // throws logData is not defined
});
},
methods: {
logData(id) {
console.log(id); // never fires
... hit server
},
},
});
If anyone knows of a better way to append click events to .html elements that would be great! But how can I bubble up and find my vue methods? Here's a fiddle to illustrate
To get your code working you would write it like this:
console.clear()
new Vue({
el: '#events',
mounted() {
$('.logMe').on('click', (evt) => {
console.log("called")
const data = $(evt.target).data('logId');
this.logData(data);
});
},
methods: {
logData(id) {
console.log(id);
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue#2.4.2"></script>
<div class="logMe" data-log-id="10">Something</div>
<div id="events"></div>
Note that the code uses an arrow function to define the click handler so that the appropriate this is captured to call the logData method on the Vue. However, doing that means you lose the this you want to get the data from the data property, so instead the example uses evt.target.
There is an alternative approach where you capture the Vue in a variable and call the method directly from your jQuery event.
console.clear()
const app = new Vue({
el: '#events',
methods: {
logData(id) {
console.log(id); // never fires
},
},
});
$('.logMe').on('click', function(){
app.logData($(this).data("logId"))
});
<script src="https://unpkg.com/vue#2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="logMe" data-log-id="10">Something</div>
<div id="events"></div>
Much easier solution =
window.app = new Vue({
el: "#app",
methods: {
myMethod(data) { ... }
}
}
// jQuery
window.app.myMethod(data);
I'm trying to emit something from within my VueJS component to a function which sits in the html page containing the component. Am I missing something, or is this not possible?
Within my component as a method:
insert: function(){
this.$emit('insertItem', 123);
}
In the page containing the component:
<medialibrary #insertItem="insertItem(arg);"></medialibrary>
<script>
function insertItem(arg){
console.log('insertItem');
console.log(arg);
}
</script>
This is actually more possible than it seems at first look. If the function is global (in particular, visible to the parent Vue), it can be called by the Vue even if it is not a method of the Vue. (It would arguably be a better idea to create a method that calls the global function.)
The main difficulty with your code was camelCasing where it should be kebab-case.
If you want insertItem to get the arg from the $emit, the HTML should only give the function name, and Vue will take care of passing the args:
<medialibrary id="app" #insert-item="insertItem"></medialibrary>
My snippet uses your original code, which provides arg from the parent Vue.
function insertItem(arg) {
console.log('insertItem');
console.log(arg);
}
new Vue({
el: '#app',
data: {
arg: 'hi there'
},
components: {
medialibrary: {
template: '<div><button #click="insert">Insert</button></div>',
methods: {
insert() {
console.log("Emit");
this.$emit('insert-item', 123);
}
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<medialibrary id="app" #insert-item="insertItem(arg);"></medialibrary>
I am trying to call a parent/root level method on a child component in Vue.js, but I keep getting a message saying TypeError: this.addStatusClass is not a function.
Vue.component('spmodal', {
props: ['addStatusClass'],
created: function() {
this.getEnvironments();
},
methods: {
getEnvironments: function() {
this.addStatusClass('test');
}
}
});
new Vue({
el: '#app',
methods: {
addStatusClass(data) {
console.log(data);
}
}
});
Here is a full JSBIN example: http://jsbin.com/tomorozonu/edit?js,console,output
If I call this.$parent.addStatusClass('test'); it works fine, but based on the Vue.js documentation, this is bad practice and I should be using props which is not working.
specifying the prop does nothing on its own, you have to actually pass something to it from the parent - in this case, the function.
<spmodal :add-status-class="addStatusClass"></spmodal>