Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

successdav's avatar

Reference another variable in v-for loop

Hi. I am kind of confuse on how to title this topic, however, I am looping through a list of items, at the point where I want to display the item as in the code item.fieldColumn. I want it such that the user will provide the field to be used as reference. So if the user pass title then it will be item.title else it will default to item.name.

ul class="z-40 w-full text-sm font-medium text-gray-900 bg-gray-300 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                <li @click="setItem(item)" v-for="(item, index ) in items.data" class="hover:bg-gray-50 cursor-pointer py-2 px-4 w-full rounded-t-lg border-b border-gray-200 dark:border-gray-600">
                    {{ item.fieldColumn }}</li>
            </ul>
props: {
        title: String,
        url: String,
        column: String
    },
    data () {
        return {
            fieldColumn: this.column ? this.column : 'name',
            search: '',
            items: [],
        }
    },
0 likes
1 reply
ramonrietdijk's avatar
Level 30

You should use brackets in these cases.

{{ item[fieldColumn] }}
1 like

Please or to participate in this conversation.