How to show short string inside tab-content of vue-form-wizard but display full string inside component's prop

Question

I want to display short text inside tab-content of vue-form-wizard but display full text inside component's prop.

tab-content should display countries abbreviation, e.g. USA, UK, UAE etc. whereas the component should take full name as prop.

Here is my code:

<template>
  <form-wizard>
    <tab-content
      v-for="country in countries"
      :key="country.id"
      :title="country.title"
    >
      <component
        :is="country.name"
        :title="country.title"
      />
    </tab-content>
  </form-wizard>
</template>

<script>
export default {
  data() {
    return {
      countries: [
        {
          id: 0,
          title: 'United States',
          name: 'UnitedStates',
        },
        {
          id: 1,
          title: 'United Kingdom',
          name: 'UnitedKingdom',
        },
        {
          id: 2,
          title: 'United Arab Emirates',
          name: 'UnitedArabEmirates',
        },
      ],
    }
  },
}
</script>

Answer 1

Here is a variant with the short names.

<div id="app">
<form-wizard>
    <tab-content
      v-for="country in countries"
      :key="country.id"  
      :title="shortName(country)"
    >
      {{country.title}}
    </tab-content>
  </form-wizard>
</div>

using:

 countries: [
    {
      id: 0,
      title: 'United States',
      name: 'UnitedStates',
      short: 'US'
    },

and

methods: {      
    shortName(country) {
        return country.short
    }
  }

Here is the JSFiddle

There is no slot inside the step to provide a custom content. You can only provide a icon instead of the step number. Like in this Demo