CODEWITHSUNDEEP
javascriptvue.js
zhanymkanov
zhanymkanov

Reputation: 596

No reaction on click event listener

I have a navbar item, which should call the reverseService on click, but never does.

IDE says that reverseService function is never used.

VueJS dev tool warns no problem. When I manually change the value of the variable content is updated fine.

HTML

<ul class="navbar-nav">
   <li class="nav-item">
       <a class="nav-link" href="#" @click="reverseService">Services</a>
   </li>
</ul>

<div :class="{{ isService? '':'section' }}" id="content">
   <div class="row" v-if="!isService">
    some content
   </div>
   <div v-else>
    other content 
   </div>
</div>

script

 new Vue({
    el: '#content',
    data: {
        isService: true,
    },
    methods: {
        reverseService: function () {
            this.isService = !this.isService;
            console.log(this.isService)
        }
    }

});

Upvotes: 0

Views: 54

Answers (1)

akuiper
akuiper

Reputation: 214927

Your Vue instance only controls the div (id=content), you need to wrap the ul into an element that Vue controls too:

<div id="app">
<ul class="navbar-nav">
   <li class="nav-item">
       <a class="nav-link" href="#" @click="reverseService">Services</a>
   </li>
</ul>

<div :class="{{ isService? '':'section' }}">
   <div class="row" v-if="!isService">
    some content
   </div>
   <div v-else>
    other content 
   </div>
</div>
</div>

In your script:

new Vue({
    el: '#app',

Upvotes: 3

Related Questions