Tetapkan Komponen aktif unik menggunakan $emit di VueJS

Saya memiliki masalah dengan pengaturan Komponen aktif unik menggunakan $emit di VueJS.

Saya ingin kapan mengklik Tab A di komponen tabbar, Itu akan be active in Tab A, not active in Tab B dan sama ke Tab B.

Semoga pria Anda membantu.

Komponen Induk:

<template>
  <div class="tab-a" v-if="taba = true">
    <span>This is Tab A</span>
  </div>
  <div class="tab-b" v-if="tabb = true">
    <span>This is Tab B and I want Tab A is not Active</span>
  </div>
  <tabbar @open="ToggleOpen"></tabbar>
</template>
<script>
   ToggleOpen: function (obj) {
      obj.current = true
      obj.rest = false
    },
</script>

Komponen Bilah Tab:

<template>
  <div class="photo_react">
    <li @click="open({current: 'taba', rest: 'tabb'})" class="tab-a" data-tooltip="Open TabA">Open TabA</li>
    <li @click="open({current: 'tabb', rest: 'taba'})" class="tab-b" data-tooltip="Open TabB">Open TabB</li>
  </div>
</template>
<script>
export default {
  methods: {
    opencomment: function (obj) {
      this.$emit('open', obj)
    }
  }
}
</script>

vue.js vuejs2
person KitKit    schedule 03.01.2018    source sumber
comment
Di v-if, sepertinya Anda hanya menggunakan penugasan variabel. Itu mungkin perlu persamaan ganda. misalnya: v-if="taba == true".   -  person IzumiSy    schedule 05.01.2018

Jawaban (1)


arrow_upward
1
arrow_downward

Apakah Anda benar-benar perlu memisahkan komponen menjadi dua? Saya datang dengan implementasi sederhana ini untuk peralihan tab.

<template>
  <div class="tab-a" v-if="currentTab == 'taba'">
    <span>This is Tab A</span>
  </div>
  <div class="tab-b" v-if="currentTab == 'tabb'">
    <span>This is Tab B and I want Tab A is not Active</span>
  </div>
  <div class="photo_react">
    <li @click="swtichTab('taba')" class="tab-a" data-tooltip="Open TabA">Open TabA</li>
    <li @click="switchTab('tabb')" class="tab-b" data-tooltip="Open TabB">Open TabB</li>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        currentTab: 'taba'
      }
    },

    methods: {
      switchTab(tab) {
        this.currentTab = tab;
      }
    }
  }
</script>
person IzumiSy    schedule 05.01.2018