@click 事件中的问题，该事件添加了一个 fontawesome 图标

Question

当我尝试添加“@click”来切换汉堡栏或关闭图标时，我尝试使用 vue js 进行响应式导航，但每次单击它时都会添加“关闭”图标。

这是代码

模板部分

<template>    
// ----
    <button @click="toggleButton">
                <i v-if="!toggle" class="fas fa-bars"></i>
                <i v-if="!toggleClose" class="fas fa-times"></i>
              </button>
    // ----

</template>

脚本部分

<script>
export default {
  name: "MultiNav",
  data: function() {
    return {
      toggle: false,
      toggleClose: true
    };
  },
  methods: {
    toggleButton() {
      this.toggle = !this.toggle;
      this.toggleClose = !this.toggleClose;
    }
  }
};
</script>

图片：

我尝试使用：

 <button @click="toggle = ! toggle">
     <i v-if="!toggle" class="fas fa-bars"></i>
     <i v-if="toggle" class="fas fa-times"></i>
 </button>

结果还是一样

Answer 1

您需要为图标添加一个键。

 <button @click="toggle = ! toggle">
    <i v-if="!toggle" key="bars" class="fas fa-bars"></i>
    <i v-if="toggle" key="times" class="fas fa-times"></i>
 </button>

该键将告诉 Vue 的算法图标实际上是不同的元素。没有它，虚拟 dom 表示认为它们是同一个元素。

Answer 2

尝试使用条件切换类

<button @click="toggle = ! toggle">
     <i  class="fas" :class="toggle?'fa-times':'fa-bars'"></i>
</button>