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.

javascriptvue.js

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

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


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

Therefore, you should bind your component property like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vanilla JavaScript: toggling text visibility with pure JS

Recently, I started learning javascript and I am attempting to use vanilla javascript to show and hide text on click. However, I can't seem to figure out what is going wrong. Here is the code snippet I have: Below is the HTML code snippet: <p cla ...

javascripthtmlcss

What are some methods for singling out a specific table row?

When working on my app, I faced the task of importing a JSON file and displaying its contents in a table with 3 columns. However, there are two main issues that arose: Utilizing array index for the row key is not recommended due to the table also having ...

javascriptarraysjsonreactjshtml-table

JavaScript TweenJS is a powerful library that simplifies

Hey there, it's my first time posting on Stackoverflow. I'm facing an issue with a tween in my code. It seems like the brute function is being called at the end, indicating that the tween should be running. However, I'm not seeing any actual ...

javascriptcreatejstweentween.js

Sending arguments from an NPM script to a NodeJS script

In my main script (publish-all.js), I am trying to call the npm publish script of an Angular project. This Angular project also has a sub-script (publish.js) that performs various tasks (creating folders, copying files, moving folders...) after running ng ...

javascriptnode.jsnpm

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

javascripthtml

Create a TypeScript function that can be called and has an extended prototype definition

I am seeking to create a callable function foo() (without using the new operator) that will also include a property foo.bar(). The JavaScript implementation would be as follows: function foo() { // ... } foo.prototype.bar = function bar() { // .. ...

javascripttypescriptinterface

What is the best way to extract a list of particular items from a nested array?

When I execute the following code: var url="https://en.wikipedia.org/w/api.php?format=json&action=query&prop=categories&titles=Victory_Tests&callback=?"; $.getJSON(url,function(data){ $.each(data, function(i, item) { console.lo ...

javascriptjquerywikipedia-api

Error: Missing semicolon at line 1005 in Vue computed function. Vetur is indicating this issue

As a beginner in vue3, I am venturing into building some side projects. However, I keep encountering an error message stating ';' expected.Vetur(1005) when attempting to utilize the computed function. Strangely enough, sometimes the same syntax w ...

javascriptvue.jsvuejs3

Error message: Unable to iterate through a non-iterable object in React reducer

I find myself in a unique predicament and could use some assistance. userData : { isValidCheckup: true, accounts: { userAccount: [ { accountType: 'checkings', includeInCheckup: false }, { accountType: 'check ...

javascriptreactjsobjectreduxreact-redux

Handling multiple Ajax requests while refreshing events in fullcalendar.io

Whenever I try to refetch events from fullcalendar after making an ajax request to insert the event, the ajax request ends up executing multiple times. This results in duplicate or even more entries of the same event in the database. Can someone explain ...

javascriptjqueryajaxfullcalendar

Display/Conceal a div using CSS in React JS/Redux

I've been working on a CSS toggle for a div with className toggling. My approach involves using redux to manage the boolean state. Using the redux chrome extension, I can see that the state is indeed changing but the div remains invisible. If you have ...

javascriptcssreactjsreact-redux

Is it possible to update the .reduce() method in React similar to how useState() is

Currently, I am immersed in a small project focusing on the "Cart" feature. The only missing piece of the puzzle at this point is calculating the total price for each product. I've managed to calculate it, but when adding multiple units of a single p ...

javascriptreactjs

Is it possible to execute an ajax function at regular intervals until a specific condition is fulfilled?

My application consists of two JSP pages. One is responsible for the UI, while the other processes the response. UICounter.jsp: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Page</titl ...

javascriptajaxjsp

Tips for adding extra spacing between icon and text field using Vuetify

The code snippet below is used for the username section: <v-text-field prepend-icon="fas fa-user" height="60px" placeholder="Username" outlined ></v-text-field> Is there a way to add space between the user ...

javascriptcssvue.jsvuetify.js

Unable to employ the executescript method in Selenium with multiple arguments

I am currently working on automating a website to create a list through input values in a text field and setting them by clicking outside the field. Due to slow performance with Internet Explorer, I am using Selenium webdriver with IE. The sendKeys method ...

javascriptarraysselenium

Retrieve worldwide data for the entire application in Next.js during the first page load

Within my Next.js application, I am implementing search filters that consist of checkboxes. To display these checkboxes, I need to retrieve all possible options from the API. Since these filters are utilized on multiple pages, it is important to fetch the ...

javascriptreactjsnext.js

AngularJS not swapping the data-url with the scope URL provided in {{ uploadUrl }}

Currently, I am utilizing jQuery fileupload to send a file to a specific URL. Within my controller, the code snippet below demonstrates how I generate the URL for uploading: uploadService.getUploadURL($scope.projectId).then(function (url) { $scope.up ...

javascriptjqueryangularjsjquery-file-upload

Issue with JQUERY where HTML select element is not visible

$(document).ready(function(){ var selArr = [ {val: 'corsair', text: 'Corsair'}, {val: 'evga', text: 'EVGA'}, {val: 'antec', text: 'Antec'} ]; $('#pSupply& ...

javascriptjqueryhtml

Modifying certain elements in a text to emphasize (PHP)

Running JavaScript code smoothly is not a problem for me, but unfortunately, I am facing difficulties when it comes to PHP. I wish to change certain words in the text for emphasis. How can I achieve this? var terms = 'term1#term2#term3'; ...

javascriptphp

Highlighting an Element Using Selenium Webdriver at Specific Coordinates

I'm currently in the process of automating a web application built with HTML5 using Selenium Webdriver. I need help figuring out how to highlight the exact coordinates where I have clicked on the Canvas element. For example, if I click on the Canvas a ...

javascriptseleniumautomation