Vue V-On:Click Does Not Work on Component

Vue v-on:click does not work on component

If you want to listen to a native event on the root element of a component, you have to use the .native modifier for v-on, like following:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

or in shorthand, as suggested in comment, you can as well do:

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

Reference to read more about native event

v-on:click does not work (vue.js)

It works fine in a snippet. You might want to wrap your Vue call in DOMContentLoaded to ensure the DOM is there before Vue tries to attach to it, as I did below.

document.addEventListener("DOMContentLoaded", function(event) {  var app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!'    },    created: function() {      console.log('Vue instance was created');    },    methods: {      exampleFunction: function() {        console.log('This is an example function');      }    },    destroyed: function() {      console.log('Vue instance was destroyed');    }  })
  app.exampleFunction();});

<script src="https://cdn.jsdelivr.net/npm/vue"></script><div id="app">  <button v-on:click="exampleFunction">General</button></div>

vue v-on:click problem,actions do not work

I make this code for my shopping cart

<div id="vue_det">
            <div id="products">
                <p>
                    Orange,pricε:20 <a href="#" v-on:click = "addItemToCart('orange',20,1)">Add</a>  
                </p>
                <p>
                    Paok,pricε:22 <a href="#" v-on:click = "addItemToCart('paok',22,1)">Add</a>  
                </p>
            </div>   

            <div v-for="entry in listCart()" class="entry">{{ entry.name }}
                <button v-on:click=removeItemFromCart(entry.name) >-</button>
                <input type='number'  v-model.number="entry.count"  >
                <button  v-on:click=addItemToCart(entry.name)>+</button>
                <button v-on:click=removeItemFromCartAll(entry.name)   >X</button>
                {{entry.total}}
            </div>
            <div>Total:{{totalCart()}}</div>
            <div>Totalcount:{{totalCount()}}</div>
        </div>
    </div>

---

 <script type="text/javascript">
var vm = new Vue({
    el: '#vue_det',
    data: {
        item:
                {
                    name: "",
                    price: 0,
                    count: 0
                },
        cart: []

    },
    methods: {
        addItemToCart: function (name, price, count) {
            for (var item in this.cart) {
                if (this.cart[item].name === name) {
                    this.cart[item].count++;
                   this.saveCart();
                    return;
                }
            }
            var item = {};
            item.count = count;
            item.price = price;
            item.name = name;
            this.cart.push(item);
              this.saveCart();
        },
         saveCart: function ()
    {
        sessionStorage.setItem('shoppingCart', JSON.stringify(this.cart));
        return;

    },
    // Load cart
    loadCart: function () {
        this.cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
    },
    setCountForItem : function (name, count) {
        for (var i in this.cart) {
            if (this.cart[i].name === name) {
                this.cart[i].count = count;
                this.saveCart();
                break;
            }
        }
    },
    removeItemFromCart : function (name) {
        for (var item in this.cart) {
            if (this.cart[item].name === name) {
                this.cart[item].count--;
                if (this.cart[item].count === 0) {
                    this.cart.splice(item, 1);
                }
                this.saveCart();
                break;
            }
        }
        this.saveCart();
    },
   removeItemFromCartAll :function (name) {
        for (var item in this.cart) {
            if (this.cart[item].name === name) {
                this.cart.splice(item, 1);
                this.saveCart();
                break;
            }
        }
       //this.saveCart();
    },
    clearCart : function () {
        cart = [];
        this.saveCart();
    },
    totalCount : function () {
        var totalCount = 0;
        for (var item in this.cart) {
            totalCount += this.cart[item].count;
        }
        return totalCount;
    },
    totalCart : function () {
        var totalCart = 0;
        for (var item in this.cart) {
            totalCart += this.cart[item].price * this.cart[item].count;
        }
      
        return Number(totalCart.toFixed(2));
    },
    listCart : function () {
        var cartCopy = [];
        for (i in this.cart) {
           //item =cart[i];
            itemCopy = {};
           for (p in this.cart[i]) {
               // itemCopy[p] = this.cart[i][p];
                itemCopy[p] = this.cart[i][p];
                

             }
            itemCopy.total = Number(this.cart[i].price * this.cart[i].count).toFixed(2);
            cartCopy.push(itemCopy)
        }
        return cartCopy;
    },
    
    
    },
   

    created: function () {
        if (sessionStorage.getItem("shoppingCart") != null) {
            this.loadCart();
        }
    },
})
        </script>

v-on:click inside a Vue Component does not work

The toggleOpenChild is in the parent wrapper, but your calling in in the child component where it does not exist.

Depending on your structure - you can either move that method into the child component, or tweak and use vue events.

    {
      template:
        '<div><li class="custom-erp-menu-list" v-on:click="toggleOpenChild">' +
        '<a href="#">' +
        "<span>" +
        '<img src="" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="Sample Image">' +
        "</span>" +
        '<span class="custom-erp-menu-parent">Purchase Order</span>' +
        "</a>" +
        '<ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">' +
        '<li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>' +
        '<li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>' +
        '<li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>' +
        "</ul>" +
        "</li></div>",
      data: function() {
        return {
          user: []
        };
      },
      methods : {

        // method has to be part of the component
        toggleOpenChild : function()
        {
          console.log('open child');
        }
      }
}

adpated from your demo : https://codepen.io/anon/pen/ePrOqm

Vue click event not emitting properly to div

It looks like the click event is propagating to the plusContainer so it does a close and then immediately open again.

You may try to do: @click.stop="$emit('close')" on the form component:

<template>
    <div class="notifContainer">
        <div class="heading">
            <h2 id="title">Dayy</h2>
        </div>
        <button @click.stop="$emit('close')">Close</button>
        <!-- <day-view></day-view> -->
    </div>
</template>
<script>
export default {};
</script>

---

Related Topics