這是我一個頁面，是在VS2019的.net core專案
我是用VUE實做出來
商品頁面是在一個HTML裡
而最上面標題跟購物車圖示則是在layout裡
大概像這樣

前端程式碼如下

<div class="row" id="app">
    <div class="col" v-for="(item , index) in list" :key="item.id">
        <div class="card" style="width: 20rem;">
            <img class="card-img-top" :src="item.photoUrl">
            <div class="card-block">
                <h4 class="card-title">{{item.name}}</h4>
                <p class="card-text">{{item.price}}</p>
                <a href="#" :id="item.id" data-price="0.5" class="add-to-cart btn btn-primary">Add to cart</a>
            </div>
        </div>
    </div>
</div>

     Vue.createApp({
        data() {
            return {
                list: [],
                message: 'Hello Vue!!'
            }
        },
        mounted() {
            axios               .get('https://localhost:44379/Customers/ShoppingProductApi/Index')
                .then((response => { (this.list = response.data); console.log(response.data)}))
                .catch(function (error) {
                    console.log(error);
                });
        },
    }).mount('#app')

目前遇到一個問題
就是我要怎麼做才能按下add-to-cart時自動加入購物車呢?
如果是純JS的話我可能會在按鈕那裡加個

onclick="AddToCart(id)"

id就razor語法所產生的id
然後在layout頁面那裡實作方法

VUE的話我暫時沒想法
我找到的範例都是在同一個頁面不是像我這樣分開
我目前暫時是引入CDN
不知道這樣有辦法用VUE處理嗎?