vue.js - How to use alphabets or roman numbers as index in Vuejs For loop?

Question

Default iterator of for loop (v-for) in vuejs starts from 0,1,2,3... How can we set the v-for to start index with i, ii, iii, or a, b,c instead of numbers. for example this is the content:

let content = [
  "Content1",
  "Content2",
  "Content3",
  "Content4",
  "Content5",
  "Content6",
  "Content7",
  "Content8"
]

the content array contains 100+ items for different products so i don't want to manually add the roman numerals

I WANT THE OUTPUT TO LOOK LIKE THIS

i. Content1

ii. Content2

iii. Content3

iv. Content4

v. Content5

vi. Content6

vii. Content7

viii. Content8

question from:https://stackoverflow.com/questions/65932274/how-to-use-alphabets-or-roman-numbers-as-index-in-vuejs-for-loop

Answer 1

Assuming content will be on data()

You can create a method:

toRoman(num, result = ''){
    const map = {
        M: 1000,
        CM: 900,
        D: 500,
        CD: 400,
        C: 100,
        XC: 90,
        L: 50,
        XL: 40,
        X: 10,
        IX: 9,
        V: 5,
        IV: 4,
        I: 1,
      };
      for (const key in map) {
        if (num >= map[key]) {
          if (num !== 0) {
            return this.toRoman(num - map[key], result + key);
          }
        }
      }
      return result;
    };

And access in the loop:

<div v-for="(cont, index) in content">
 {{toRoman(index).toLowerCase()}}. {{cont}}
</div>