如何通過解析 json 的數組訪問嵌套數據

Question

我正在創建一個 vuetify 簡單表，它將顯示各種數據元素。 問題是，其中一些元素是基於關系和嵌套的。 獲取頂級數據很好，如果我將嵌套數據作為獨立數據提取，它也可以正常工作。

但是，我想要做的是利用一個數組來避免表格的重復 html 代碼。 這可能嗎？

下面是為表本身構造的代碼。

HTML：

   <v-simple-table fixed-header height="300px">
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left">
                Attribute
              </th>
              <th class="text-left">
                Value
              </th>
            </tr>
          </thead>
          <tbody>
            <tr 
            v-for="(serviceProperty, idx) in serviceProperties" 
            :key="idx">
              <th>{{ serviceProperty.label }}</th>
              <td>{{ service[serviceProperty.value] }}</td>
            </tr>            
          </tbody>
        </template>
      </v-simple-table>

JS：

export default {
  name: "Details",
  data() {
    return {
      loading: true,
      service: {},
      serviceProperties: [
        {
          label: 'Description',
          value: 'description'
        },
         {
          label: 'Location',
          value: 'organization.locations[1].streetAddress'
        },        
        {
          label: 'EIN',
          value: 'organization.EIN'
        }
      ]
    };
  },
  props: ["serviceId"],
  async created() {
    this.service = await Vue.$serviceService.findOne(this.serviceId);
    this.loading = false;
  },
};

Answer 1

這似乎不必要地復雜。

考慮使用計算，像這樣

...
  computed: {
    mappedData() {
      return this.service.map(item => {
        Description: item.Description,
        Location: item.organization.locations[1].streetAddress,
        EIN: item.organization.EIN
      })
    }
  }
...

然后，您可以通過以下方式訪問模板中的數據：

...
<element v-for="item in mappedData">
  {{item.Description}}
  {{item.Location}}
  {{item.EIN}}
</element>
...