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>

CodePudding user response：

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": "[email protected]",        "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": "[email protected]", "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": "[email protected]", "address": { }},
        {"id": 4, "name": "Ervin Howell", "username": "Antonette", "email": "[email protected]", "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/[email protected]/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>

CodePudding user response：

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) }}