Question

我有一个导航栏项目，该项目应在单击时调用reverseService，但永远不会调用。

IDE表示从不使用反向服务功能。

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

点击事件监听器无反应

1 个答案: