проблема в событии @click, добавляющем еще один замечательный значок

Question

Я пытался сделать адаптивную навигацию с помощью vue js, когда я пытался добавить '@click', чтобы переключать бургер или значок закрытия, но вместо этого он добавляет значок 'закрыть' каждый раз, когда я нажимаю на него.

вот код

секция шаблона

<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  class="fas" :class="toggle?'fa-times':'fa-bars'"></i>
</button>

Answer 2

Вам необходимо добавить ключ к значкам.

 <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 думает, что это один и тот же элемент.