Pass prop as parameter to method in Vue

Question

I have a Vue component and I pass props into it:

  export default {
    props: [
      "notificationDate",
      "notificationType",
      "notificationMessage",
      "downLoadLink",
      "inProgress",
      "downloadImage",
      "count",
      "name"
    ],

In my template, i use these props:

 <div class="notification">
    <span class="time">{{notificationDate}}</span>
    <p><b>{{notificationType}}:</b> {{notificationMessage}}</p>

For one prop, "count", I want to pass it to a method in the click event of a button. I tried this:

  <b-button type="is-danger" size="is-small"
            icon-right="delete" @click="deleteNotification(count)")">
    Remove
  </b-button>

But in my method, count is undefined:

      methods: {
        deleteNotification(count) {
          //count is undefined
        }}

How do I pass my prop into my @click method? Thanks

this works, i forgot to pass in count to my component from the vue its being crreated in — BoundForGlory

Majed Badawi Majed Badawi · Accepted Answer · 2020-06-14T18:17:17

You can pass it like this:

<b-button type="is-danger" size="is-small"
            icon-right="delete" @click="deleteNotification(count)")">
    Remove
</b-button>

Pass prop as parameter to method in Vue

1 Answers