Computed property and list rendering (vue3)

Hi,

I have a list in a instance, and I use v-for to loop thru, a property of element is type, I’d like to display description of type (taken from a map typeDesc, how to refer to the current index of loop in computed property? thanks

jsfiddle code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>

    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  
    <div id="hello-vue" class="demo">           
        <li v-for="item in items">
            {{ item.message }} {{item.type}} {{desc}}
          </li>
    </div>

    <script>
        
        let typeDesc = new Map()
        typeDesc.set(0, 'type1')
        typeDesc.set(1, 'type2')
        
        const HelloVueApp = {
            data() {
                return {
                    message: 'Hello Vue!!',
                    items: [{ message: 'Foo', type:0 }, { message: 'Bar', type: 1 }]
                }
            },
            computed: {
              
                desc(n) {
                    return typeDesc.get(0)
                }
            }
        }

        Vue.createApp(HelloVueApp).mount('#hello-vue')

    </script>
</body>

</html>

You can’t use a computed property for this. You’d use a method instead:

methods: {
  desc(n) {
    return typeDesc.get(n)
  }
}

with:

{{ desc(item.type) }}

One viable alternative that does use computed properties is to introduce a component to represent a list item. The v-for would create multiple instance of that component, one for each item. That component can use a computed property for desc because it only has to deal with a single item.