if I have a vue 3 proxy object like this
<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>
Can I use like this? or any other way?
<template>
<ul>
<li v-for="user in users">
street: {{ user[street] }} <br>
lat: {{ user[lat] }}
</li>
</ul>
</template>
If I understood you correctly, you can use object dot notation:
const app = Vue.createApp({
data() {
return {
users: [
{"id": 1, "name": "Leanne Graham", "username": "Bret", "email": "Sincere@april.biz", "address": {"street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496"}}},
{"id": 2, "name": "Ervin Howell", "username": "Antonette", "email": "Shanna@melissa.tv", "address": { "street": "Victor Plains", "suite": "Suite 879", "city": "Wisokyburgh", "zipcode": "90566-7771", "geo": { "lat": "-43.9509", "lng": "-34.4618"}}},
{"id": 3, "name": "Ervin Howell", "username": "Antonette", "email": "Shanna@melissa.tv", "address": { }},
{"id": 4, "name": "Ervin Howell", "username": "Antonette", "email": "Shanna@melissa.tv", "address": { "street": "Victor Plains", "suite": "Suite 879", "city": "Wisokyburgh", "zipcode": "90566-7771", "geo": {}}}
],
street: "address.street",
lat: "address.geo.lat"
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
<li v-for="user in users">
street: {{ user.address?.street }} <br>
lat: {{ user.address?.geo?.lat }}
</li>
</ul>
</div>A value can be retrieved from dot-separated path string with a helper such as Lodash get or similar implementation.
The method:
getStreet(obj) {
return _.get(obj, this.street)
}
The usage:
street: {{ getStreet(user) }}