使用vue.js组件和属性调用函数

Question

我正在创建一个购物车类型按钮来计算点击次数，当使用的参数单击该按钮时，该按钮应调用一个函数id，但是，使用正确的参数将不会调用该函数我曾尝试添加{{id}} and :onClick="addThisToCart({{id}}但出现大量错误。这是我的代码        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                }            },        });在vue元素的properties部分中定义了mid，然后在函数中定义了var cart = 0;        function addThisToCart(movieId) {            var movieId = this.mid;            this.cart += 1;            this.cart += 1;            console.log(movieId);            console.log(cart);        }每次单击该按钮时，它应该在购物车中添加+1，但是，这会产生大量错误，而不是发送“ 4434”，而是发送 {{mid}}