si tengo un objeto proxy vue 3 como este
<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>¿Puedo usar así? o de alguna otra manera?
<template> <ul> <li v-for="user in users"> street: {{ user[street] }} <br> lat: {{ user[lat] }} </li> </ul> </template>Si te entendí correctamente, puedes usar la notación de punto de objeto:
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>Se puede recuperar un valor de una cadena de ruta separada por puntos con un asistente como Lodash get o una implementación similar .
El método:
getStreet(obj) { return _.get(obj, this.street) }El uso:
street: {{ getStreet(user) }}