从模板访问时，未定义Vue组件prop值

Question

我创建了2个Vue组件：

<h1>{{ videoId }}</h1>

但是，'vimeo'组件模板中的this.videoId始终未定义。如果我将模板更改为：

{{1}}

可以正确显示道具值。

我已经在互联网上搜索了解决方案，但不幸的是，我还没有。

Answer 1

在初始化任何组件之前，您所拥有的代码基本上是在模板定义时尝试使用this.videoId。

相反，您需要做的是bind videoId值，以便在渲染时间进行翻译。我会使用计算属性执行此操作，因为您需要连接vimeo URL前缀。

类似的东西：

computed: {
  videoUrl() { return 'https://player.vimeo.com/video/' + this.videoId; }
},
template: '<iframe :src="videoUrl" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'

请注意:src中的冒号以进行动态绑定。 See the docs for more info on this.