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

Question

i tried to make responsive navigation with vue js, when i tried to add '@click' to toggle burger bar or close icon, but it's adding the 'close' icon instead every time i click it.

here's the code

template section

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

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

pict:

i try to use:

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

it still resulting the same result

Answer 1

You need to add a key to the icons.

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

The key will tell Vue's algorithm that the icons are in fact different elements. Without that the virtual dom representation thinks that they are the same element.

Answer 2

Try switching the classes using condition

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