我可以在 vue3 中使用.(dot) 字符串获取子属性吗？

Question

如果我有一个像这样的 vue 3 代理 object

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

我可以这样使用吗？ 或任何其他方式？

<template>
  <ul>
    <li v-for="user in users">
      street: {{ user[street] }} <br>
      lat: {{ user[lat] }}
    </li>
  </ul>
</template>

Answer 1

如果我理解正确，您可以 object 使用点符号：

 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" } } }], 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>

Answer 2

可以使用诸如 Lodash get或类似实现之类的帮助程序从点分隔的路径字符串中检索值。

方法：

getStreet(obj) {
  return _.get(obj, this.street)
}

用法：

street: {{ getStreet(user) }}