从 Vue.js 中的 JSON 数据结构中检索数据

Question

我想从餐表（json 数据模式）中检索数据到浏览器中的表格。检索工作，但不幸的是我不知道如何从我的饭桌上检索工作日的数据并将它们显示在表中。

如何检索周一、周二、周三、周四和周五？

JSON 数据架构：

// 20200901152958 // http://localhost:8080/mealtable/weekly/1

{
  "id": 1,
  "calendarWeek": 1,
  "mealTableWeek": {
    "Monday": {
      "id": 4,
      "name": "Burger",
      "type": "fleischhaltig",
      "price": 2.60
    },
    "Tuesday": {
      "id": 3,
      "name": "Reishänchenpfanne",
      "type": "fleischhaltig",
      "price": 2.60
    },
    "Wednesday": {
      "id": 1,
      "name": "Vollkornnudeln",
      "type": "vegan",
      "price": 2.30
    },
    "Thursday": {
      "id": 5,
      "name": "Kartoffelpüree",
      "type": "vegetarisch",
      "price": 2.30
    },
    "Friday": {
      "id": 2,
      "name": "Falafel",
      "type": "vegan",
      "price": 1.90
    }
  }
}

MealTableWeekComponent.vue：

 <template>
  <div class="container">
    <h3>Meal Table</h3>
    <div class="container">
      <table class="table">
        <thead>
        <tr>
          <th scope="col">#</th>
          <th>Meal</th>
          <th>Type</th>
          <th>Price in $</th>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="d in mealTables.mealTableWeek" v-bind:key="d.id">
          <th></th>
          <td>{{d.name}}</td>
          <td>{{d.type}}</td>
          <td>{{d.price}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import MealTableDataService from "@/service/MealTableDataService";

export default {
  name: "MealTableWeekComponent",
  data() {
    return {
      mealTables: {
        id: " ",
        mealTableWeek: {
          name: {
            id: " ",
            name: " ",
            type: " ",
            price: " "
          }
        }
      }
    };
  },

  methods: {
    refreshMealTable() {
      const id = this.$route.params.id;
      MealTableDataService.retrieveMealTableById(id)
          .then(response => {
            console.log(response)
            this.mealTables = response.data;
          });
    }
  },
  created() {
    this.refreshMealTable();

  }
};
</script>

<style scoped lang="scss">

</style>

在浏览器中查看：

Answer 1

<tr v-for="(d, key) in mealTables.mealTableWeek" v-bind:key="d.id">
    <td>{{key}}</td>
    <td>{{d.name}}</td>
    <td>{{d.type}}</td>
    <td>{{d.price}}</td>
</tr>