My program is creating templates and adding a button, the button should call a function when clicked with the parameter of the id, however, it won’t call the function with the correct parameter

there is tried adding {id} and :onClick=”addThisToCart({id} but getting a ton of errors.

Heres my code

Vue.component(‘movietable’, {
props: [‘title’, ‘price’, ‘mid’],
template: `
<tr>
<td>{title}</td>
<td>{price}</td>
<td>
<div class=”quantity”>
<button onClick=”addThisToCart({mid}”>You clicked me { count } times.</button>
</div>
</td>
</tr>
`,
data: function () {
return {
count: 0
}
},
});

mid is being defined in the properties section of the vue.js element
and then the function

var cart = 0;
function addThisToCart(movieId) {
var movieId = this.mid;
this.cart += 1;
this.cart += 1;
console.log(movieId);
console.log(cart);
}

It should add +1 to cart every time the button is clicked, however, getting a ton of errors and instead of sending ‘4434’ it is sending {mid}

Solution :

You can use

<button @click=”addThisToCart(mid)”>You clicked me { count } times.</button>

No curly braces for the argument of the function.