Pass multiple parameters to the methods in vue.js using razor page

Question

I have an asp.net core7 program in which I used vue.js, my question is how can I send some parameters to the vue.js methods?

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

 DeleteSale(ID, Image) {...}

Answer 1

Do you want to use vue.js in the razor page and pass @item.ID, @item.Image to the DeleteSale method? If that's the case, here's an example you can use as a reference(It should be noted that your button attributes should be placed in the <div id="app"> </div> container):

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

The parameters can be received: