Vue：为数组属性设置默认值的最佳方法？

Posted 2023-02-23

【中文标题】Vue：为数组属性设置默认值的最佳方法？

【英文标题】：Vue: Best way to set a default for a prop that is an Array?

【发布时间】：2019-12-19 12:14:50

【问题描述】：

我的组件有一个 prop orders，它是一个返回客户订单的数组。当组件挂载时，它会向父组件发出调用以进行 API 调用，然后刷新 prop。如果用户没有订单，订单很可能是一个空数组，其中我有一条消息说“此用户不存在订单”。 问题是，由于我将它作为数组类型的道具，道具的默认值为[]（空数组），因此即使在初始组件加载时，模板也会看到订单为[]并显示“没有订单存在消息”，但一秒钟后刷新道具时，它会显示订单。 我正在尝试将 orders 的初始值设置为 null，以便我可以处理尚未从 api 设置订单的特定情况。我尝试添加default: null，这样我就有了这样的道具：

props 
   orders: type: Array, default: null

但这仍然无法正常工作，因为 orders 属性在页面加载时仍然是一个空数组。

【参考方案1】：

对于数组，您需要从函数中返回默认值，如下所示：

props 
  orders:  type: Array, default: function()  return null; 

你也可以使用箭头功能

props 
  orders:  type: Array, default: () => null 

【讨论】：

我喜欢***.com/a/51005856/470749的答案