Vuejs - 如何将 prop 的默认值设置为预定义数据？

Question

问题很简单。我想定义 adata如下；

data() {
  return {
    logoURL: "some-link/some-picture.png"
  }
}

我想将其设置为道具的默认状态，如下所示：

props: {
  infoLogoURL: {
    type: String,
    default: this.logoURL,
  },
}

显然它没有按照我想要的方式工作，并且出现以下错误：

Uncaught TypeError: Cannot read property 'logoURL' of undefined

我该如何处理这个问题？这是我如何使用道具的示例：

<cardComp
  infoTitle = "Info Title" 
  infoText = "Info Text" 
  infoSubIcon = "Sub Icon Name" 
  infoSubIconColor = "css-color-class" 
  infoSubText = "Sub Text" 
  infoDescription = "Some Text Description" 
  infoIcon = "Icon Name" 
  infoIconColor = "icon-color-css"
  infoLogoURL = "some-link/some-picture.png"
/>

这是另一个问题...我想infoIcon在没有infoLogoURL. 假设该特定 .png 文件的链接暂时不可用，因此在这种情况下，我想显示 .png 文件infoIcon。当 .png 文件可用时，我应该只显示infoLogoURL，而不是infoIcon. 我怎么做？

Answer 1

您无法设置 中 prop 的默认值data。

解决这个问题的一种方法是使用属性computed：

computed: {
  defaultLogoURL: function() {
    return this.infoLogoURL || this.logoURL
  }
}