Assigning values to props in a Vue component

I created a Vue component that is supposed to receive the "uploadedFile" prop, but it's not functioning properly. I am only getting the correct information in the $attrs:

https://i.sstatic.net/crXmH.png

Here is my component:

Vue.component('table-file', {
props: ['files'],
template: '<div class="row"><table class= "table table-sm table-hover"><thead><tr><th scope="col" style="text-align: center">FILE NAME</th><th scope="col" style="text-align: center; width: 20%;" colspan="2">OPTIONS</th></tr></thead><tbody><tr v-for="(file, index) in files" :key="index" style="text-align: center;"><td scope="row" style="font-size: medium !important">{{file.FileName}}</td><td><Button class="btn btn-info btn-raised" v-on:click="downloadFile(file.ID)" style="margin: 0">Download</Button></td><td>\<Button class="btn btn-info btn-raised" v-on:click="deleteFile(file.ID)" style="margin: 0; background-color: red">Delete</Button></td></tr></tbody ></table ></div >'
})
<table-file :files="uploadedFile"></table-file>

Would appreciate any help with this issue.

Answer №1

The file you uploaded is named uploadedfile, not UploadedFile

Answer №2

Remember, letter case matters when writing JavaScript code. Make sure to rename uploadedFile -> uploadedfile.

Vue.component('table-file', {
props: ['files'],
template: '<div class="row"><table class= "table table-sm table-hover"><thead><tr><th scope="col" style="text-align: center">FILE NAME</th><th scope="col" style="text-align: center; width: 20%;" colspan="2">OPTIONS</th></tr></thead><tbody><tr v-for="(file, index) in files" :key="index" style="text-align: center;"><td scope="row" style="font-size: medium !important">{{file.FileName}}</td><td><Button class="btn btn-info btn-raised" v-on:click="downloadFile(file.ID)" style="margin: 0">Download</Button></td><td>\<Button class="btn btn-info btn-raised" v-on:click="deleteFile(file.ID)" style="margin: 0; background-color: red">Delete</Button></td></tr></tbody ></table ></div >'
})
<table-file :files="uploadedfile"></table-file> // Remember to use the correct letter case for variable names.

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

Ajax Live Search Error Detected

Having trouble retrieving data from the database..! <html> <head> <title>Live Search</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> &l ...

What is the best way to create a list using only distinct elements from an array?

If I have a collection of different colors: Red Blue Blue Green I aim to extract only the unique colors and store them in an array. Subsequently, I plan to incorporate each color from that array into an existing color list. The desired outcome would l ...

Ways to shift text upwards while scrolling in a downward direction?

I'm a beginner with jQuery and I could use some assistance. My goal is to have the text move upwards and a static box slowly disappear as you scroll down the website. Something similar to what you see here: p, body { margin: 0; padding: 0; } b ...

Heroku is rejecting the Discord token, but it is functioning properly in Visual Studio Code

I am facing an issue with an invalid token error on Heroku, even though the token in my main.js file on Git is the same as the one I have in Visual Studio Code. Interestingly, Heroku claims it's an invalid bot token while the Discord bot token from VS ...

Update header component dynamically upon successful login with Angular 11

I am currently using Angular 11 and facing an issue with displaying the username in the header component. The header loads before the login component, which results in the user data being stored in local storage only after the login component is loaded. As ...

Send an array to a function with specified criteria

My current code successfully splits an array, but I need to pass a value when the array condition is met. For example, here is how the value is split into an array: var myArr = val.split(/(\s+)/); If the array in position 2 is empty, I need to use ...

Animate the tubular geometric pathway by continuously updating its values

When creating a TubeGeometry, I supplied a SplineCurve3 / CatmullRomCurve3 path as a parameter. My goal is to update the position of each point on the path using geometry.parameters.path.points[1].y += 0.01; within the requestAnimationFrame loop. Even tho ...

Sending the results from a Vue.js component to a text input field in HTML

Using vue.js and the v-for function to read QR codes has been a challenge for me. For example: <ul v-for="(scan,key) in scans" :key="key" > {{scan.content}} </ul> I need to extract the value inside {{scan.content}}, like an EmployeeID, but I ...

Adjusting the prototype of a JavaScript object in real-time

Is there a way to dynamically change object prototype in JavaScript in order to fully recover an object previously saved using JSON, including its behavior? Currently, one solution is to create a new object and copy the data from the JSON-recovered object ...

Unable to retrieve information from the JSON object

Here's the script I'm working with: <script type="text/javascript> function getData(username){ $.ajax({ url: '{% url "data" %}', data: { ' ...

Supporting multiple types for matching object structures is a feature in Jest

I'm currently working on a test using jest to verify if an object key is either a string or a number. It seems like a basic task, but surprisingly there isn't much guidance in the documentation. Test Example: test('Checking asset structure ...

Guide on building a REST API with Node.js Express.js and OracleDB to perform database updates

Looking for assistance with creating an API in Node.js to fetch and update data on the frontend. I am able to retrieve data using the provided code, but facing challenges updating it. React.js is being used for the frontend. var express = require("expr ...

Encountering a JavaScript error due to an erroneous character when trying to parse

I need to convert a `json` string into an object format that is extracted from a `.js` file. Here is the `JSON` string located in `document.js`: [ { "type": "TableShape", "id": "63c0f27a-716e-804c-6873-cd99b945b63f", "x": 80, ...

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...

Anomaly in the default checked state of checkboxes

I'm currently working on a project and encountering an issue with the code below. I need to incorporate a forEach() loop within getElements() instead of using map(). Additionally, I want the default state of a checkbox to remain checked even after nav ...

Utilizing JavaScript to manage a div's actions throughout various pages

I am currently working on an HTML project that involves having a collapsible text box on each page. However, I am struggling to figure out the best way to achieve the desired behavior. Essentially, some of the links will belong to a class that will set a v ...

When running the PHP script, the output is shown in the console rather than in the

Here is a PHP script snippet that I am working with: <?php add_action('wp_ajax_nopriv_getuser', 'getuser'); add_action('wp_ajax_getuser', 'getuser'); function getuser($str) { global $wpdb; if(!wp_verif ...

How can I make JavaScript skip over a specific portion of my HTML code?

I have a script running on all pages of my website. I would like it to continue running on the specific page, but ignore a certain section. For example: <p>process with javascript</p> <p>skip, instruct javascript function to ignore</ ...

Shattered raw emotion

Does anyone have any insight on how to resolve this error? I've hit a roadblock trying to figure out the issue in the message below. Here is the snippet of code: :label="` ${$t('cadastros.clientes.edit.status')}: ${cliente.status === ...

What is the best way to iterate through array elements with AngularJS?

I am looking to showcase array values using the ng-repeat directive, and then call the getimage function with itemid and photoidlist in order to retrieve the image URL. The JSON data that I have is as follows: $scope.productslist = { "json": { "re ...