组件道具在Vue.js中未定义

Question

我正在将道具传递给我的一个观点，但是当我在控制台中打印结果时，它将我发送为未定义，但在视图中它会打印我的ID，因为未定义的我无法请求/咨询这是代码：

export default {
  props: ['idVideo'],
  data: () => ({
    videos: []
  }),
  created() {
    //do something after creating vue instance
    this.api = new ApiCanal10({})
    this.getRelVideos()

  },
  methods: {
    getRelVideos: function() {
     //print in the console
      console.log(`video/related/${this.idVideo}`)
    }
  }
}

这是在视图中打印的图像，控制台将我发送为未定义

如果你能帮我解决这个问题，我将非常感激。

Answer 1

请参阅camelCase vs. kebab-case：

  

HTML属性不区分大小写，所以[...] camelCased道具名称需要使用他们的kebab-case（连字符分隔）等价物：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})


<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

因此，您需要按如下方式绑定组件属性：

<component-name :id-video="someVar"></component-name>

Answer 2

要将信息从父级传递给子级，我使用了更新，这是代码：

export default {
  updated(){
    this.getRelVideos()
  },
  methods: {
    getRelVideos: function() {}
  }
}

以这种方式在控制台中显示请求。