javascript - 点击事件监听器没有反应

Question

我有一个导航栏项目，它应该在单击时调用reverseService，但从来没有这样做。

IDE表示从未使用过reverseService函数。

VueJS 开发工具警告没有问题。当我手动更改变量内容的值时，更新得很好。

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>

脚本

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

});

Answer 1

您的 Vue 实例仅控制 div (id=content)，您需要将 ul 包装到 Vue 也控制的元素中:

<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>

在您的脚本中:

new Vue({
    el: '#app',