无法使用循环索引访问VueJS中JSON的属性

bwitn5fc 于 2023-05-23 发布在 Vue.js

关注(0)|答案(3)|浏览(140)

我的VueJS运行应用程序显示Strava的活动数据，按周分组，超过20周。我遇到的困难是，API中的对象出现了，但我无法访问每个属性。
以下是证监会的相关摘录。

数据

weekly_total_data将随着时间的推移而增长

data() {
        {
            return {
            activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            weekly_total_data:
               [{"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
                {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
                {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}]
            }
        }
    }

功能

访问数据

matchWeeklyTotals(){
        var x = this.weekly_total_data
        console.log(x)
        return x
      }
    },

模板

在周中循环，获得每周的索引，然后使用它显示该周的适当数据

<div v-for="(week, week_index) in this.activity_weeks" v-bind:value="week._id">
   <div class="container max-w-xl mx-auto">
       <h2 class="text-2xl">Week {{week}}: {{ (matchWeeklyTotals()[week_index])}}</h2>
   </div>
</div>

就目前而言，我可以显示对象，但是当我执行matchWeeklyTotals()[week_index][total_distance]时，它失败了。我也尝试了JSON.parse的变体。
欢迎任何访问total_distance和total_moving_time的帮助。

vue.js

来源：https://stackoverflow.com/questions/76301389/cannot-access-property-of-json-in-vuejs-using-a-loop-index

3条答案

按热度按时间

mrfwxfqh1#

下面的代码正在工作。
我正在过滤weekly_total_data以检查activity_weeks是否存在于weekly_total_data => week_number中

<script setup>
const activity_weeks = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

const weekly_total_data = [
  {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
  {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},
  {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
]

const matchWeeklyTotals = () => {
  var x = weekly_total_data
  console.log(x)
  return x
}

</script>

<template>
  <div v-for="week in weekly_total_data.filter(x => x.week_number in activity_weeks)">
     <div class="container max-w-xl mx-auto">
         <h2 class="text-2xl">Week {{week.week_number}}: {{ week.total_distance }}</h2>
     </div>
  </div>
</template>

赞(0）回复(0）举报 2023-05-23

bfnvny8b2#

如果我理解正确，你可以使用optional chaining：

const app = Vue.createApp({
  data() {
    return {
      activity_weeks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
      weekly_total_data: [
        {"week_number":3,"total_distance":39877.6,"total_moving_time":11841},
        {"week_number":2,"total_distance":58596.4,"total_moving_time":18719},     
        {"week_number":1,"total_distance":41347.5,"total_moving_time":12796}
      ]
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(week, week_index) in activity_weeks" v-bind:value="week._id">
    <div class="container max-w-xl mx-auto">
      <h2 class="text-2xl">Week {{ week }}:</h2>
      <p>{{ weekly_total_data[week_index]?.total_distance }}</p>
      <p>{{ weekly_total_data[week_index]?.total_moving_time }}</p>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-05-23

qojgxg4l3#

如果您试图通过getter访问数据，请确保您的getter是一个计算属性

export default {
...,
computed: {
matchWeeklyTotals() {
return this.weekly_total_data;
}
}
}

当您在模板中访问它们时，您不需要使用括号调用函数，因此您可以直接访问它们

<h2>
{{ (matchWeeklyTotals[week_index])}}
</h2>

另外，我建议添加一个检查，以确保该weekIndex的项是否存在，如果可能的话，匹配week_number的数值并使用find函数，或者将数组Map到一个可以直接访问数据的表单中，以防数据在某个时候出现排序问题。您也可以直接Mapweekly_total_data数组，除非有特定的原因需要多个数组

赞(0）回复(0）举报 2023-05-23

我来回答

无法使用循环索引访问VueJS中JSON的属性

3条答案

相关问题

热门标签

最新问答