What is the best approach for assigning a value to the action URL in el-upload?

<el-upload class="upload" action="http://127.0.0.1:5000/upload/email" :file-list="fileList" >

Utilizing the Element UI library, I am attempting to pass an email value to the 'action' URL in the format of base_url/upload/${email}. However, this method is not effectively binding the value as it interprets the entire URL as a string.

export default {
  name: "**",
  data() {
    return {
      base_url: "http://127.0.0.1:5000",
      email: email,
      fileList: []
    }
}

What steps should be taken to successfully bind the data to the action for making a POST request using el-upload with the provided base_url and email data?

javascriptvue.jsdata-bindingelement-ui

Answer №1

Switching action with :action did the trick for me! It should look something like this:

<el-upload
 class="upload"
 :action="base_url+'/upload/'+email"
 :file-list="fileList"
>

Answer №2

One way to enhance your Vue.js application is by utilizing computed properties and associating them with the action attribute of an element.

computed: {
    actionAttr: function () {
      return `${this.base_url}/${this.email}`
    }
  }

For more detailed information, you can visit https://v2.vuejs.org/v2/guide/computed.html

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

Is it possible to apply a class without using ng-class?

Seeking a more efficient way to apply conditional classes to multiple elements on a validation form page, I am exploring options to assign one of five potential classes to each form input. While the traditional method involves manually specifying the class ...

javascriptangularjs

Counting JSON elements in Vue.js with Laravel

I am struggling to figure out how to display the number of tasks elements in JSON format. My goal is to have something similar to this: Tasks to do 2/12 (where 2 - tasks with flag 1, 12 - all tasks) I attempted to use the length function but encountered ...

jsonlaravelvue.js

Executing asynchronous callback with Electron and Vue using nodeffi

Currently, I am experimenting with using Async along with a received Buffer. While I am able to obtain the correct answer, I am facing challenges in accessing variables outside of the callback function. Specifically, I am attempting to assign the value o ...

asynchronousvue.jselectrondevtools

retrieving XML information into a div using Ajax and JavaScript

I am currently working on developing a chat application and facing an issue with fetching all logged in users into a div with the ID "chat_members". Despite confirming that the XML file structure is correct, the JavaScript code alongside AJAX does not seem ...

javascriptxmlajax

Display an AJAX div when the image is hovered over and have it track the movement of

I am seeking assistance with my website project, which involves providing users with download links to movies. However, I am struggling to make the preview_block div(id) appear when the mouse hovers over the movie_block div(id). Additionally, I am having ...

javascriptjqueryhtmlcssajax

Struggling to make antd compatible with my create-react-app project

Exploring ant.design with create-react-app piqued my interest, so I decided to follow the steps outlined in the antd documentation. https://ant.design/docs/react/use-with-create-react-app npx create-react-app antd-demo npm add antd Within the app.js fil ...

javascriptreactjsnpmcreate-react-appantd

Exploring the ng-repeat directive with an array of objects

In the server response, I have an array of objects that I am trying to iterate over using ng-repeat in order to read each value. While trying to use array[0].value works fine, things are not going as expected when using ng-repeat. Despite all my efforts ...

javascriptangularjsarraysangularjs-ng-repeat

Using PrimeNG checkboxes to bind objects in a datatable

PrimeFaces Checkbox In the code snippet below, my goal is to add objects to an array named selectedComponents in a model-driven form when checkboxes are checked. The object type of item1 is CampaignProductModel, which belongs to an array called selectedC ...

javascriptangulartypescriptangular2-formsprimeng

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

Submitting JSON data using JavaScript

My goal is to send a username and password to my backend server. However, I am encountering an issue where the data does not successfully reach the backend when using the following code: function register() { var text = '{"username":"admin1","pass ...

javascriptjsonpostrequest

Having trouble with the jQuery load function not functioning properly

I have encountered an issue with this code snippet while running it on XAMPP. The alert function is working fine, but the HTML content fails to load. I have included links to jQuery 3.2.1 for reference. index.html $(document).ready(function(){ $("#b ...

javascriptjqueryhtml

How can I dynamically populate a select menu in HTML without the need to submit any data

Looking for help with an input form in HTML that uses a combination of input and select boxes. My goal is to dynamically populate a select menu based on the data entered into the input boxes. For example: Employee One: Jim Employee Two: John Employee Thre ...

javascriptphphtml

What could be causing the preloader to fail in my React application?

I am developing a React App with Redux functionality, and I am looking to implement a preloader when the user clicks on the "LoginIn" button. To achieve this, I have created a thunk function as follows: export const loginInWithEmail = (email, password) =&g ...

javascriptreactjsredux

Processing MongoDB elements in NodeJS by retrieving them and appending them to a list or array for further processing

Currently, I am involved in a full stack project that requires fetching stock data from mongodb and performing algorithms on specific information. Here is an illustration of the JSON object stored in mongodb: [{ _id: 5e11d67abf05f3d00d56b801, LUNA: { ...

javascriptnode.jsmongodbexpressmern

JavaScript HTML content manipulation

Why doesn't this code work? innerHTML cannot handle something so complex? <html> <head> <script type="text/javascript"> function addTable() { var html = "<table><tr><td><label for="na ...

javascript

Is there a way to display the form values on the table once it has been submitted?

I'm struggling with my form input not showing up under the table headings after submission. I've reviewed the code multiple times, but can't figure out what's causing the issue. If you have any suggestions on how to write the code more ...

javascripthtmljquerycss

"Ionic with Angular is facing an issue where ion-radio element cannot be set as checked by default

Having trouble selecting a radio button in a radio list. Can anyone help? Any assistance would be greatly appreciated. This is how I've been attempting it: <div class="list"> <ion-radio ng-repeat="item in goalTypeList" ...

javascriptangularjsradio-button

Notifications will be displayed with Alertifyjs to the individual who activated them

Just diving into the world of nodejs and express framework, so I appreciate your patience as I navigate through this learning process. I've implemented the alertifyjs library to display notifications for different alerts on my site. However, I&apos ...

javascriptnode.jscookiesexpressalertifyjs

Adjusting the text and background hues using JavaScript results in an immediate reversal

Attempting to dynamically change the text color and background color based on user input in the textbox. While it initially works, the color changes only flash for a brief moment before reverting back. <!DOCTYPE html> <html> <head> ...

javascripthtml

Adding a new value to an array of objects without altering the existing values in ReactJS and NextJS

I have a JSON file containing image names that I need to organize into a Key-Value Object. I am currently using regex to create keys by removing "-img[image No]". However, I am having trouble storing all the image names in the array without overwriting pre ...

javascriptreactjsnext.js