In Vue.js, the properties of components are not defined

Question

In Vue.js, the properties of components are not defined

Currently, I am experiencing an issue where I am passing a props to one of my views, but when I print the result in console it shows up as undefined. This is causing difficulties as I am unable to make requests or consults. Here is the code snippet in question:

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

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

An image displaying the output in the view compared to the console, where it shows undefined can be seen here.

I would greatly appreciate any assistance provided to resolve this issue.

javascript vue.js

Answer 1

Answer №1

In order to transfer data from the parent component to the child component, I implemented an update using the following code snippet:

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

This setup allows the request to be displayed in the console.

Answer 2

In order to transfer data from the parent component to the child component, I implemented an update using the following code snippet:

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

This setup allows the request to be displayed in the console.

Answer 3

Answer №2

Check out this guide on the difference between camelCase and kebab-case:

HTML attributes do not distinguish between cases, which is why [...] props with camelCase in JavaScript should be written in kebab-case (using hyphens) when used:
Vue.component('child', {
  // CamelCase in JS
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})



<child my-message="hello!"></child>

Therefore, you should bind your component property like this:

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

Answer 4

Check out this guide on the difference between camelCase and kebab-case:

HTML attributes do not distinguish between cases, which is why [...] props with camelCase in JavaScript should be written in kebab-case (using hyphens) when used:
Vue.component('child', {
  // CamelCase in JS
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})



<child my-message="hello!"></child>

Therefore, you should bind your component property like this:

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

In Vue.js, the properties of components are not defined

Answer №1

Answer №2

Similar questions

Transferring information using "this.$router.push" in Vue.js

Using AngularJS to manage cookies along with arrays

How to apply an icon image using the background property in CSS in Vue 3

The Nuxt image keeps disappearing every time I navigate to a new page

I'm trying to find a way to access a particular field within an HTML document using JavaScript in Node.js. Can anyone

Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

Troubleshooting: Angular input binding issue with updating

What is the process for updating parameters before finalizing a route in Vue.js?

The useEffect hook in ReactJs is triggering multiple times

Laravel vue infinite scroll failing to load additional content

The intricacies of the Jscript ReadLine() function

What is the best approach for fetching a refined selection of items from an array of IDs using GraphQL?

The style of the button label does not persist when onChange occurs

jQuery blueimp File Uploader: Transferring multiple files to the server on Internet Explorer

Is there a way to go about installing node_modules?

Reordering sections in a dynamic manner

How can I incorporate an error page into this Express application?

Error: Unable to access the 'questionText' property as it is undefined

How can JavaScript be used to rearrange the placement of DOM elements?

Access and retrieve data from a string using XPath with JavaScript