Vuejs Prop 未定义答案

【问题标题】：Vuejs Prop is undefinedVuejs Prop 未定义
【发布时间】：2021-04-06 09:18:55
【问题描述】：

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

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

为了编辑这本书，一个路由链接被放置在另一个名为 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>

当点击路由器链接时，用户被导航到 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>

当用户导航到图书编辑器时，slug 属性未定义，如果我们尝试更新任何图书，总会创建新图书。

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

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router vue-props

【解决方案1】：

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

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

来自 Vue 路由器 docs：

当 props 设置为 true 时，route.params 将被设置为组件的 props。

【讨论】：