Vue 3 道具以字符串形式返回

Question

我有一个路由器链接：

  <router-link
    :to="{
    name: 'EditStaff',
    params: { id: key, staffInfo: staff }
    }"
  >
    <i class="fas fa-edit text-info"></i>
  </router-link>

以及带有以下属性的视图；

  props: {
    staffInfo: {
      type: Object,
      required: true
    }
  }

有路线；

  {
    path: "/staff/edit/:id",
    name: "EditStaff",
    component: EditStaff,
    props: true,
    beforeEnter: requireAuth
  },

当我在 EditStaff 视图中记录 props.staffInfo 时，我得到了 Object 的字符串版本 "[object Object]"。

我需要更改什么来获取对象？

Answer 1

如果您使用的是console.log(props.staffInfo )，它可能会将您的对象就地转换为字符串

改用console.log(JSON.stringify(props.staffInfo ,null, 2))

const staffInfo = {gettingFired: 'false?'};
console.log(staffInfo); // what you'd hope to get
console.log(staffInfo.toString()); // but you might be doing this, especially if it happens in the template
console.log(JSON.stringify(staffInfo).toString()); // so convert to string first

如果您尝试在模板中输出它，{{ props.staffInfo }} 将被转换为使用 toString（或等效项）`

您可以使用<pre>{{ JSON.stringify(props.staffInfo ,null, 2)) }}</pre> 获得更好的输出。