Vue pass two parameters to @click event

Last Updated: December 9, 2020

You can pass multiple parameters to the function with the event parameter

 <tr v-bind:key="index" v-for="(job, index) in data_rows">
     <td>
         <router-link :to="{path:'/jobs/'+job.id+'/view',query:query_param}">
          {{job.job_number}}
         </router-link>
     </td>
     <td>{{job.job_created_date}}</td>
     <td>{{job.estimated_finish}}</td>
     <td>{{job.job_status}}</td>
     <td>
         <div v-if="job.invoice==null">
             <a href="javascript:void(0)" @click="function (e) {generate_invoice(e, job);}" :id="job.id" >
                 Generate Invoice
             </a>
          </div>

          <div v-else>
             {{job.invoice.invnumber}}
          </div>
      </td>
 </tr>

You can see the function generate_invoice has got two parameters

@click="function (e) {generate_invoice(e, job);}"
  methods: {

            generate_invoice: function (event,job) {
                let payload = {
                    job_id: job.id
                }

                console.log(event.target.id)

            }
 },