使用razor页面向vue.js中的方法传递多个参数

Question

我有一个asp.net core7程序，其中使用了vue.js，我的问题是如何向vue.js方法发送一些参数？

 <i v-on:click="DeleteSale('@item.ID','@item.Image')"  class="far fa-trash-alt cursor text-danger"></i>

 DeleteSale(ID, Image) {...}

Answer 1

是否要在razor页面中使用vue.js并将

@item.ID

、

@item.Image

传递给

DeleteSale

方法？如果是这样的话，这里有一个例子可以作为参考（需要注意的是，你的按钮属性应该放在

<div id="app"> </div>

容器中）：

@section Scripts {
    <script src=https://unpkg.com/vue@3/dist/vue.global.js></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                };
            },
            methods: {
                DeleteSale(ID, Image) {
                    console.log("DeleteSale method called with ID:", ID, "and Image:", Image);
                    
                }
            }
        });

        app.mount('#app');
    </script>
}

<div id="app">
    <button v-on:click="DeleteSale('@Model.Id','@Model.Image')" class="btn btn-danger">
        <i class="far fa-trash-alt"></i>
    </button>

</div>

可接收参数：