使用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}}