Vuejs 道具未定义

Question

我正在尝试创建一个应用程序，我们可以在其中创建一个具有名称、描述、发布日期等的 Book 实例。对于前端，我使用的是 Vuejs，后端是 Django。

为了创建新的 Book 实例，我创建了一个名为 BookEditor.vue 的视图。我正在尝试使用相同的视图来编辑 Book 实例。

为了编辑本书，路由器 link 被放置在另一个名为 BookActions.vue 的组件中。

<template>
  <div>
    <router-link
      :to="{ name: 'book-editor', params: { slug: slug } }"
      >Edit
    </router-link>
  </div>
</template>

<script>
import { apiService } from "@/common/api.service";

export default {
  name: "BookActions",
  props: {
    slug: {
      type: String,
      required: true,
    },
  }
};
</script>

单击路由器 link 后，用户将导航至 BookEditor.vue。以下是路由器代码。

const routes = [
  {
    path: "/book-editor/:slug?",
    name: "book-editor",
    component: BookEditor
  }
];

以下是 BookEditor.vue 代码。

export default {
  name: "BookEditor",
  props: {
    slug: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      tag_id_list: [],
      published_on: null,
      book_name: null,
      book_description: null,
      error: null,
      isUpdateEditor: false,
    };
  },
  methods: {
    onSubmit() {
       if {.....}
       else {
        let endpoint = "/api/books/";
        let method = "POST";
        if (this.slug !== undefined) {
          endpoint += `${this.slug}/`;
          method = "PUT";
        }
        apiService(endpoint, method, {
          name: this.book_name,
          published_on: this.published_on,
          description: this.book_description,
          tag_id_list: this.tag_id_list,
        }).then((book_data) => {
          this.$router.push({
            name: "book",
            params: { slug: book_data.slug },
          });
        });
      }
    },
  },
  async beforeRouteEnter(to, from, next) {
    if (to.params.slug !== undefined) {
      let endpoint = `/api/books/${to.params.slug}/`;
      let data = await apiService(endpoint);
      return next((vm) => {
        (vm.book_name = data.name),
          (vm.started_on = data.started_on),
          (vm.published_on= data.published_on),
          (vm.isUpdateEditor = true);
      });
    } else {
      return next();
    }
  },
  created() {
    document.title = "Book Editor";
  },
};
</script>

当用户导航到 Book Editor 时，slug 属性是未定义的，如果我们尝试更新任何一本书，总是会创建一本新书。

我已经探索了各种问题，但无济于事。

Answer 1

你的 beforeRouteEnter 守卫应该在工作所以我假设你的问题是关于 onSubmit 访问 this.slug 道具。您必须在路由定义中设置 props: true 才能将路由参数分配给道具：

const routes = [
  {
    path: "/book-editor/:slug?",
    name: "book-editor",
    component: BookEditor,
    props: true       // <-- Add this
  }
];

来自 Vue 路由器 docs:

When props is set to true, the route.params will be set as the component props.

Vuejs 道具未定义

Vuejs Prop is undefined

vue.js

vue-router

vue-component

vuejs2

vue-props