Vue.js @click仅注册了一半时间

Question

我需要在单击选择框时切换班级以为下拉箭头设置动画。它有效，但是只有一半时间。在下面的截屏视频中，您可以看到箭头如何反映类“展开”的状态。

这是HTML：

<li *ngIf="user" class="nav-item">
  <a class="nav-link" routerLink="/home" >Item 1</a>
</li>

在我的Vue.js实例中，只有一个简单的compActive数据条目：false

<div :class="{ expanded: compActive }" class="select-wrapper">
  <select v-model="companyId" @click="compActive = !compActive" @change="changeComp" name="company" id="company" >
    {% for company in companies %}
        <option value="{{ company.id }}">{{ company.name }}</option>
    {% endfor %}
  </select>
</div>

编辑：添加了源样式

SASS

var app = new Vue({
  el: '#app',
  data: {
    compActive: false
  },
  ...