javascript - 使用 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
                }
            },
        });

mid 是在 vue 元素的属性部分中定义的，然后是函数

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

标签： javascripthtmlvue.js

Answer 1

您可以使用

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

函数的参数没有花括号。