在“AirJordan”和“NewBalance”标签之间添加一个空格 - VUEJS

Question

I have a v-for and transition for a tab nav. I would like to add a space between the words "Air(space here)Jordan" and "New(space here)Balance" in the code below. Im using vue3 and tailwindcss. Its importing the component but when adding a space in thee desired words, it wont use the component anymore.

data() {
  return {
    currentTab: 'Adidas',
    tabs: ['Adidas', 'Airjordans', 'Nike', 'Newbalance', 'Reebok', 'Converse', 'Vans', 'Puma']
  }
}, }

my template code is shown below.

    <div class="nav">
      <div class="bg-[#f3f4f6]">
      <div class="max-w-7xl flex flex-1 overflow-auto whitespace-nowrap pl-4 pr-4 lg:pl-10 py-3 space-x-4 ">
      <button  class="font-rubikreg uppercase text-sm "
         v-for="tab in tabs"
         :key="tab"
         :class="['tab-button', { active: currentTab === tab } ]"
         @click="currentTab = tab"
       >
        {{ tab }}
      </button>
    </div>

i am importing components to display under each tab name. Then pushing to display when name is clicked. How can i add a space in NewBalance and AirJordans.

  import Airjordans from "./airjordans.vue";
  import Nike from "./nike.vue";
  import Adidas from "./adidas.vue";
  import Newbalance from "./newbalance.vue";
  import Reebok from "./reebok.vue";
  import Converse from "./converse.vue";
  import Vans from "./vans.vue";
  import Puma from "./puma.vue";

Answer 1

The best way is to separate the components from the labels. Alternatively you could try to do some hack, but I'd say being explicit is better.

If you look into the docs they show an example where they have an object of with the keys and Components matching

link

const tabs = {
  Home,
  Posts,
  Archive
}

you can setup a similar thing, just define the key

example: link

const tabs = {
  "H O M E": Home,
  Archive,
  Posts,
}

My preference, however, would be to be more explicit and use an array like this

const tabs = [
  {label: 'Adidas', component: Adidas},
  {label: 'Air jordans', component: AirJordans},
  // etc...
];

and then have currentTab use the index

full example link

<script>
  import { ref } from 'vue'
  import Adidas from './Adidas.vue';
  import AirJordans from './AirJordans.vue';

  const tabs = [
    {label: 'Adidas', component: Adidas},
    {label: 'Air jordans', component: AirJordans},
  ];
  
  export default {
    data() {
      return {
        currentTab: 0,
      }
    },
    setup(){
      return {tabs}
    }
  }
</script>
<template>
  <button v-for="(tab,i) in tabs" :key="i" @click="currentTab=i" :class="{ active: currentTab === i }">
    {{tab.label}}
  </button>
  <component v-bind:is="tabs[currentTab].component"></component>
</template>
<style>
  .active{
    background: salmon;
  }
</style>