django - 无法将对象数据从 Django API 渲染到 Vuejs 前端

Question

我已经使用 Django 3.x 将近两年了，并且刚刚开始使用 Vue js 大约一个星期，使用文档来尝试和学习预期的方式。到目前为止，只要我不使用 Vue 前端来创建对象，我的 api 访问点就会按预期工作。所以，归结为代码。我尝试通过从 Home.vue 到 Detail.vue 的道具发送报告，但由于某种原因，它的加载似乎没有超过 noc_ticket。以防万一，路由器的main.js在我学习的时候匆忙制作，我怀疑它的问题，但你永远不知道。

这是我的猴子代码：

主页.vue

<template>
  <div class="home">
    <div class="container">
      <div class="container-fluid">
        <h1 class="mt-4">Dashboard</h1>
        <ol class="breadcrumb mb-4">
          <li class="breadcrumb-item active">Dashboard</li>
        </ol>
        <div class="row">
          <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
              <div class="card-body">Report Archive</div>
              <div
                class="
                  card-footer
                  d-flex
                  align-items-center
                  justify-content-between
                "
              >
                <a class="small text-white stretched-link" href=""
                  >View Details</a
                >
                <div class="small text-white">
                  <i class="fas fa-angle-right"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card bg-danger text-white mb-4">
              <div class="card-body">Initial Report</div>
              <div
                class="
                  card-footer
                  d-flex
                  align-items-center
                  justify-content-between
                "
              >
                <a class="small text-white stretched-link" href=""
                  >View Details</a
                >
                <div class="small text-white">
                  <i class="fas fa-angle-right"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
              <div class="card-body">Report Update</div>
              <div
                class="
                  card-footer
                  d-flex
                  align-items-center
                  justify-content-between
                "
              >
                <a class="small text-white stretched-link" href=""
                  >View Details</a
                >
                <div class="small text-white">
                  <i class="fas fa-angle-right"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
              <div class="card-body" href="">Finalize Report</div>
              <div
                class="
                  card-footer
                  d-flex
                  align-items-center
                  justify-content-between
                "
              >
                <a class="small text-white stretched-link" href=""
                  >View Details</a
                >
                <div class="small text-white">
                  <i class="fas fa-angle-right"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <h1>Summary Table</h1>
          <div class="container container-fluid">
            <table class="table table-hover table-bordered">
              <thead>
                <tr>
                  <th scope="col">TSRM Ticket</th>
                  <th scope="col">Type Of Outage</th>
                  <th scope="col">Amount of Affected Clients</th>
                  <th scope="col">Impacted Municipalities</th>
                </tr>
              </thead>

              <tbody>
                <!-- start making the for loop here -->
                <tr v-for="report in reports" :key="report.pk">
                  <td>
                    <router-link
                      :to="{
                        name: 'detail',
                        params: { noc_ticket: report.noc_ticket },
                      }"
                    >
                      {{ report.noc_ticket }}</router-link
                    >
                  </td>

                  <td v-for="outage in report.outage_type" :key="outage.id">
                    {{ outage.outage_type }}
                  </td>
                  <td
                    v-for="client_amount in report.clients"
                    :key="client_amount.id"
                  >
                    {{ client_amount.client_amount }}
                  </td>

                  <td
                    v-for="municipality in report.municipalities.split('+')"
                    :key="municipality"
                  >
                    {{ municipality }},
                  </td>
                </tr>
                <!-- End it here. -->
              </tbody>
            </table>
          </div>
        </div>

        <div class="row">
          <h1>
            <!-- {#            Mini Charts go here.#} -->
          </h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { apiService } from "../common/api.service.js";
export default {
  name: "Home",
  data() {
    return {
      reports: [],
    };
  },
  methods: {
    getReports() {
      let endpoint = `api/report-list`;
      apiService(endpoint).then((data) => {
        this.reports.push(...data);
      });
    },
  },
  created() {
    this.getReports();
    console.log(this.reports);
  },
};
</script>

细节.Vue

<template>
  <div class="detail container">
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">Report Details</h1>
        <p class="lead">Highlighted Report Table</p>
      </div>
    </div>
    <h1 >{{ noc_ticket }}</h1>
    <p >{{ report.notes }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import { apiService } from "../common/api.service.js";
export default {
  name: "Report",
  props: {
    noc_ticket: {
      type: String,
      required: true,
    },
    
  },
  data() {
    return {
      report: {},
    };
  },
  methods: {
    getReportData() {
      let endpoint = `/api/report-detail/${this.noc_ticket}/`;
      apiService(endpoint).then(data => {
        Object.assign(this.report, data);
        // this.report = data;
      });
    },
  },
  created() {
    this.getReportData();
  },
};
</script>

路由器/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Detail from "../views/Detail.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/report-detail/:noc_ticket/",
    name: "detail",
    component: Detail,
    props: true,
  },
];

const router = new VueRouter({
  mode: "history",
  base: '/',
  routes,
});

export default router;

编辑 我忘记输入我的控制台输出，我很抱歉。 控制台输出

[HMR] Waiting for update signal from WDS...
2L3K4J2LK34J2L3:1 Error parsing 'integrity' attribute ('undefined'). The hash algorithm must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character.
2L3K4J2LK34J2L3:1 Error parsing 'integrity' attribute ('undefined'). The hash algorithm must be one of 'sha256', 'sha384', or 'sha512', followed by a '-' character.
api.service.js?5ce5:21 SyntaxError: Unexpected token < in JSON at position 0

标签： djangovue.js