Computed property and list rendering (vue3)


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">

    <meta charset="utf-8">

    <script src=""></script>

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

        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)




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

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


{{ 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.