Given a Vue 3 proxy object structure as shown below:
<script>
export default {
name: "test",
data() {
return {
users: [{
"id": 1,
"name": "Leanne Graham",
"address": {
"street": "Kulas Light",
"geo": {
"lat": "-37.3159"
}
}
},
{
"id": 2,
"name": "Ervin Howell",
"address": {
"street": "Victor Plains",
"geo": {
"lat": "-43.9509"
}
}
}],
street: "address.street",
lat: "address.geo.lat"
}
}
}
</script>
Is this method of accessing the data valid, or is there a better approach?
<template>
<ul>
<li v-for="user in users">
street: {{ user[street] }} <br>
lat: {{ user[lat] }}
</li>
</ul>
</template>