Vue 3 prop 以字符串形式返回

如何解决Vue 3 prop 以字符串形式返回

我有一个路由器链接：

  <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]"。

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

解决方法

如果您使用 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,2)) }}</pre> 以获得更好的输出。