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元素的properties部分中定义然后是功能

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

每次单击该按钮时，它应该在购物车中添加+1，但是，它会产生大量错误，而不是发送{443），而是发送{{mid}}

Answer 1

您可以使用

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

该函数的参数没有大括号。

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

1 个答案: