0

The purpose of this code is to show and hide some facebook-like dropdown mini-tabs by toggling data. The problem is it called every toggling function on a given click event, but some of them updating data variables some are don't. E.G: I called toggleUser() in 2 different places. However, first changes the data variable and re-render UI, a second line called on class="avatar pointer" is not toggling data variable but calls a function.

<template>
    <div class="flex header">
            <div class="nav-item">          
                <div class="notification pointer"  @click="toggleNotif" >
                    <small class="notif-count"> {{notif_count}}
                    </small>
                </div>
                <div class="notif-tab" v-show="showNotif">
                    <p class="tab-title flex" >Notification</p>
                </div>
            </div>
            <div class="nav-item ">         
                <div class="flex">              
                    <div class="user pointer" v-on:click="toggleUser">userName <i class="arrow down"></i></div>
                    <div class="avatar pointer" v-on:click="toggleUser" v-bind:style="{ backgroundImage: 'url('+ avatar +')' }"></div>
                </div>
                <div class="user-tab" v-show="showUser">
                </div>
            </div>
            <div class="nav-item">          
                <div class="cart pointer"  @click="toggleCart">
                    <small class="cart-count"> <div>{{cart_count}} </div>
                    </small>
                </div>
                <div class="cart-tab" v-show="showCart">
                    <div v-on:click="logout()" class="pointer">
                        Logout
                    </div>
                </div>
            </div>
    </div>
</template>

export default {
  name: 'TTHeader',
  data: () => {
    return {
      showNotif: false,
      showUser: false,
      showCart: false,
      notif_count: 0,
      cart_count: 0,
      avatar: "https://cdn.iconscout.com/icon/free/png-256/avatar-370-456322.png",
    }
  },
  methods: {
    toggleNotif() {
      this.showNotif = !this.showNotif;
      this.showUser = false;
      this.showCart = false;
    },
    toggleUser() {
      this.showUser = !this.showUser;
      this.showNotif = false;
      this.showCart = false;
    },
    toggleCart() {
      this.showCart = !this.showCart;
      this.showUser = false;
      this.showNotif = false;
    },
    close (e) {
            if (!["user-tab", "notif-tab", "cart-tab", "bell pointer", "user pointer", "cart pointer", "user pointer"].includes(e.target.className)) {
                this.showCart = false;
                this.showUser = false;
                this.showNotif = false;
            }
         }
    },
    mounted () {
       document.addEventListener('click', this.close)
    },
    beforeDestroy () {
       document.removeEventListener('click',this.close)
    }

}
Altantur
  • 2,552
  • 1
  • 13
  • 12
  • 1
    Your question is not answerable without a [mcve], since it's an interaction question. The obvious fix is to move the `@click` on the common parent, especially since the two elements are the only children of their parent. If you're really curious about why it's happening, most likely clicking on one of the children triggers the function twice. Since it's a toggle, it looks like it's not happening. Place a console.log in the function to make sure. Or, another issue might be one of the children has `pointer-events: none`. Which again, needs repro for fixing. – tao Oct 09 '20 at 02:16
  • Added minimal reproducible example. I found that issue in part of click outside of tabs. It triggering clicks always false. Thanks for your answer. – Altantur Oct 09 '20 at 04:13

1 Answers1

-1

Vue JS: Difference of data() { return {} } vs data:() => ({ })

I believe it has to do with the use of the arrow function for data. Try using either data() { or data: function() {.

Sarah
  • 132
  • 3