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

Question

我想将膳食 table 中的数据（json 数据模式）检索到浏览器中的 table 表单。检索有效，但不幸的是我不知道如何从我的用餐中检索工作日的数据 table 并将它们显示在 table.

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

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

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

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

Retrieve Data from JSON Data Structure in Vue.js

json

structure

html-table

vue.js