محمد لشگری
4 سال پیش توسط محمد لشگری مطرح شد
0 پاسخ

دی باگ کردن nav tab در vue

<template>
  <div class="flex flex-wrap">
    <div class="w-full">
      <ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
        <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
          <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='home'" :class="{'text-cyan-600 bg-white': currentTab!=='home' , 'text-white bg-cyan-600': currentTab=='home'}">
           خانه
          </a>
        </li>
        <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
          <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='profile'" :class="{'text-cyan-600 bg-white': currentTab!=='profile' , 'text-white bg-cyan-600': currentTab=='profile'}">
            پروفایل
          </a>
        </li>
        <li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
          <a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='setting'" :class="{'text-cyan-600 bg-white': currentTab!=='setting' , 'text-white bg-cyan-600': currentTab=='setting'}">
            تنظیمات
          </a>
        </li>
      </ul>
      <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
        <div class="px-4 py-5 flex-auto">
          <div class="tab-content tab-space">
            <div v-if="currentTab='home' " :class="{'hidden': currentTab !== 'home', 'block': currentTab == 'home'}">
              <p>
                        تولید محتوای خانه
              </p>
            </div>
            <div v-else-if="currentTab='profile' " :class="{'hidden': currentTab !== 'profile', 'block': currentTab =='profile'}">
              <p>
تولید محتوای پروفایل
              </p>
            </div>
            <div v-else  :class="{'hidden': currentTab !=='setting', 'block': currentTab == 'setting'}">
              <p>
تولید محتوای تنظیمات
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pink-tabs",
  data() {
    return {
      currentTab: 'home'
    }
  },
  methods: {
    }
}
</script>

سلام دوستان اگر امکانش هست در دیباک گردن این کدها به من کمک کنید
ممنونم