Pass additional parameter while calling a function in Vue

Visit Element on GitHub Check out the upload component

<el-upload
  class="avatar-uploader"
  action="/upload"
  :show-file-list="false"
  :on-error="handleUrlError"
  :on-success="handleUrlSuccess">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

function:

handleUrlSuccess(response, file, fileList) {
}

if you add an extra parameter:

<el-upload
  class="avatar-uploader"
  action="/upload"
  :show-file-list="false"
  :on-error="handleUrlError"
  :on-success="handleUrlSuccess(response, file, fileList, 233)">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

function:

handleUrlSuccess(response, file, fileList, param) {
}

Error message: Property or method "response" is not defined on the instance but referenced during render.

javascriptvue.jsvuejs2vue-componentelement-ui

Answer №1

Your method's arguments are being passed through the component's triggered on-success event. For instance, it might look like this:

this.$emit('on-success', response, file, fileList)

Vue internally handles this process in a simplified manner...

let boundEventHandler = parseEventHandlerExpression(eventName)
boundEventFunction.apply(vmInstance, arguments)

To customize these arguments in your code, you can add your own information like so:

:on-success="handleUrlSuccess(...arguments, 233)"

or

:on-success="(res, file, fileList) => handleUrlSuccess(res, file, fileList, 233)"

Credit goes to woki for the last snippet

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

The integration of Tinymce and Vuetify dialog is causing issues where users are unable to input text in the source code editor or add code samples

Having an issue with the Vuetify dialog and TinyMCE editor. Upon opening the dialog with the editor inside, certain functionalities like Edit source code or Insert code sample are not working as intended. Specifically, when attempting to use one of these p ...

javascriptvue.jstinymcevuetify.js

After performing a Vuex action on one Vue.js component, the update is not reflected on another Vue

I am facing an issue with a component that renders a booking table. When I update my store in another component, the table does not get updated even though the store and computed properties are updated. I suspect that the problem lies with the filter not b ...

javascriptvue.jsvuex

What is the reason for the lack of arguments being passed to this Express middleware function?

I have been developing a middleware that requires the use of `bodyParser` to function, however I do not want to directly incorporate it as a dependency in my application. Instead, I aim to create a package that includes this requirement and exports a middl ...

javascriptnode.jsexpressmiddleware

Turn off scrolling for the body content without removing the scrollbar visibility

Whenever I click a thumbnail, a div overlay box appears on top: .view-overlay { display:none; position:fixed; top:0; left:0; right:0; bottom:0; overflow-y:scroll; background-color:rgba(0,0,0,0.7); z-index:999; } Some browsers with non-f ...

javascriptjqueryhtmlcss

Exploring the Ref feature in Vue's Composition API

How do I correctly type my Ref firstName as a string? There are two errors highlighted, one in the template - {{ firstName }}, and the other in the script - const firstName = ref('') as String. I believe the issue lies in the typing, as I assume ...

formsvue.jsvuetify.jsrefvue-composition-api

ajax is triggering the error handler

I am currently developing a web application and I am trying to send data from a PHP controller to JavaScript. After conducting some research, it seems that the most efficient way to accomplish this is by utilizing Ajax and Json. However, I am encountering ...

javascriptphpjqueryajax

Karma jasmine and an angular controller that utilizes the 'Controller as' syntax (where 'this' is used instead of $scope)

I'm having trouble setting up karma for my unit tests, specifically on a basic example: Here is the controller file: angular.module('balrogApp.requests', [ /* Dependencies */ ]) // Routes configuration .config(['$routeProvider&a ...

javascriptangularjsunit-testingdependency-injectionkarma-jasmine

What is the reasoning behind excluding any JavaScript code between the <script> tags when our intention is solely to incorporate an external JS file?

It's puzzling to me why the author of the "Javascript & Jquery: the missing manual , second edition" recommends the following sentence: When including the src attribute to connect to an external JavaScript file, avoid placing any JavaScript cod ...

javascriptjquery

The functionality of Selection.modify is unfortunately limited when it comes to input and textarea elements in Firefox

Check out this demonstration (jsfiddle link): const input = document.querySelector('#input'); const textarea = document.querySelector('#textarea'); const div = document.querySelector('div'); const x = (e) => { if (e.ke ...

javascripthtmlfirefox

What is the best way to monitor parameter changes in a nested route?

I need assistance with managing routes const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'explore', component: ExploreComponent, children: [ { path: '', component: ProductListC ...

javascriptangulartypescript

Leveraging a JavaScript variable declared outside the function to successfully transfer data to my AJAX function

Every time the enter key is pressed, my AJAX function gets executed. I used to pass a set of javascript variables equal to elements in the HTML (the contents of a text area) as data for the AJAX function. Now, I want these JS variables to hold values from ...

javascriptajax

Invoke the javascript function by referencing the JavaScript file

I'm encountering an issue with two JavaScript files. One file uses the prototype syntax, while the other utilizes jQuery. Unfortunately, they don't seem to work harmoniously together. I've attempted calling the functions within the files usi ...

phpjavascriptjqueryprototypejs

Combine text in vue.js within a form

I'm looking to merge the texts I've created in vue into a single text Example: text field 1 = Code text field 2 = Area text field 3 = NumberCode Then I have one text field UniqueNumber, which is the value of this text field a combination of ...

laravelvue.jsweb

Steps for sending an array from PHP to an AJAX response in JavaScript

How can I send an array from PHP to an AJAX call? AJAX call: $.post('get.php', function(data) { alert(data); }); get.php $arr_variable = array('033', '23454'); echo json_encode($arr_variable); When the data is alert ...

javascriptphpajaxarrays

Updating information dynamically in a controller based on an ng-repeat from a different controller in AngularJS

To enhance comprehension, I've created a straightforward example. For this scenario, ng-repeat is used to call a template that has its own controller. However, the controller of the template requires injected data from a service for each ng-repeat it ...

javascriptangularjscontrollerangularjs-ng-repeat

Developing front-end libraries using the jspm workflow

What is the best way to convert a library written in TypeScript to ES5? While JSPM documentation focuses on web apps (such as with jspm bundle-sfx), the information I've found on Google seems more suited for a web app workflow rather than a library w ...

javascriptbuildecmascript-6systemjsjspm

What is the best way to retrieve information from a different table in order to establish a condition and form a relationship in Laravel and Vue?

Seeking assistance with website development. How can I retrieve data from the cycles table to establish a conditional relationship with the mortalities table? The information in the cycles table includes: $table->increments('id'); $table ...

phpmysqllaravelvue.jseloquent

Is there a way to incorporate a trace in Plotly while also arranging each data point along the x-axis in a unique custom order?

I am facing a challenge in creating a line graph that displays (x, y) coordinates where the x axis represents a date and the y axis represents a value. The dates are formatted like DD-MM-YYYY, for example, 15-04-2015. My initial trace is added with the fo ...

javascriptgraphplotly

Discovering all the links present on a webpage using node.js

Currently, I am diving into node.js (webdriver) and encountering some challenges. Despite my efforts to search online for examples of the tasks I need help with, I have come up empty-handed. One example that has me stumped is how to log all links from a pa ...

javascriptnode.jsselenium-webdriverwebdriver

Stop the duplication of downloading JavaScript files

When it comes to my website, I have incorporated sliders that stream videos from Vimeo. Upon running a check on GTMetrix, I noticed an overwhelming number of http requests. Looking at the waterfall, I discovered numerous duplicate downloads of javascript, ...

javascriptjquery