@ click事件中的问题，该问题添加了一个更大的字体图标

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>

pict：

我尝试使用：

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