CODEWITHSUNDEEP
vue.jsvuejs2
Naim R.
Naim R.

Reputation: 183

click event outside of an element in vue.js

I started learning Vue.js, I have a problem increasing the counter if it is outside a div element (I want it outside) ,I tried the below but counter not working.I saw a package called'v-click-outside' but dont know how to use it in this example, help is really appreciated:

<html>
<head>

<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>Untitled</title>
</head>
<body>
<div class='badge badge-warning' id='lblCartCount'>{{ count }}</div>
<button type="button" class="btn btn-primary" id="mission" v-on:click="increment">Add to Cart</button>


<script>

        new Vue({
            el: "#lblCartCount",
            data:function(){
                return{
                    count: 0,
                }
            },


            methods: {
                increment() {
                    this.count+=1;

                }
            }
          
        });
</script>
</body>
</html>

Upvotes: 0

Views: 391

Answers (1)

Andrey Popov
Andrey Popov

Reputation: 7510

The problem here is that you tell Vue to mount to the #lblCartCount element. And the button you're trying to listen to, is not part of that div. Which means is not part of the Vue instance whatsoever. You could have tons of html and just part of it to be operated by Vue.

There are probably ways you could achieve that, but that's completely contrary to what Vue is used for. If you don't like it inside that particular div, you could wrap the two in another element and mount Vue on top of those two. But there's no simple way to use Vue things outside of Vue. There's just no logic behind it.

Also the package is for another purposes, not clicking outside of Vue, but outside of particular element (like modal).

Upvotes: 1

Related Questions