محمد لشگری
3 سال پیش توسط محمد لشگری مطرح شد
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>

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


ثبت پرسش جدید

به همدیگه کمک کنیم

به محمد لشگری کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام