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

我正在将一个道具传递给我的一个视图，但当我在控制台中打印结果时，它会将我作为未定义的发送给我，但在视图中，它会将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}`)
    }
  }
}

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

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

如果您能帮助我解决这个问题，我将不胜感激。

请参阅：

HTML属性不区分大小写，因此[…]camelCased prop名称需要使用其kebab大小写（以连字符分隔）等价物：

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


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

Vue.component（'child'{
//JavaScript中的camelCase
道具：['myMessage']，
模板：“{myMessage}}”
})

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

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

请参见：

HTML属性不区分大小写，因此[…]camelCased prop名称需要使用其kebab大小写（以连字符分隔）等价物：

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


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

Vue.component（'child'{
//JavaScript中的camelCase
道具：['myMessage']，
模板：“{myMessage}}”
})

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

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

---

要将信息从父对象传递给子对象，我使用了一个更新，以下是代码：

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}`)
    }
  }
}

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

---

通过这种方式，它在控制台中显示请求。

要将信息从父级传递给子级，我使用了一个更新，代码如下：

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}`)
    }
  }
}

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

---

通过这种方式，它会在控制台中显示请求。

“同样，如果您使用的是字符串模板，则此限制不适用。”它也不适用于OP似乎正在使用的单个文件组件。我使用-->updated（）{this.getRelVideos（）}之类的更新更新了父请求，然后我用一个方法来调用它：-->methods:{getRelVideos:function（）{}}@JULIOMACHAN你能澄清并更新你的问题吗？“同样，如果你使用的是字符串模板，那么这个限制不适用。”它也不适用于单个文件组件，OP正在使用的。我用更新-->updated（）{this.getRelVideos（）}更新了父请求，然后我用方法-->方法：{getRelVideos:function（）{}}@JULIOMACHAN你能澄清并更新你的问题吗？在打印之前，你有一个错误异常。你确定这与此无关吗？这是对本地玩家的警告，但它是另一个组件，不会影响项目本身。打印之前，你有一个错误异常。你确定这与此无关吗？这是对本地玩家的一个警告，但它是一个不同的组件，不会影响项目本身