vue:call a function with extra param

Question

https://github.com/ElemeFE/element http://element.eleme.io/#/en-US/component/upload

<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 add a extra param:

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

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

Answer 1

The arguments for your method are coming from the component's emitted on-success event. For example, it would have something like

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

Internally, Vue would do something like (and this is very simplified)...

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

What you can do in your consumer is capture all these arguments and then append your own

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

or

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

_{Thanks woki for that last one}