iT邦幫忙

0

VUE&.net core問題請教

https://ithelp.ithome.com.tw/upload/images/20210621/20110132tnTZqf4ktV.jpg

這是我一個頁面,是在VS2019的.net core專案
我是用VUE實做出來
商品頁面是在一個HTML裡
而最上面標題跟購物車圖示則是在layout裡
大概像這樣
https://ithelp.ithome.com.tw/upload/images/20210621/20110132vtRDZjfddV.jpg

前端程式碼如下

<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處理嗎?

froce iT邦大師 1 級 ‧ 2021-06-22 08:30:02 檢舉
綁事件啊...
vue一樣可以綁事件,你vue沒學完當然沒想法。
Homura iT邦高手 1 級 ‧ 2021-06-22 09:00:28 檢舉
你vue是不是連基礎都沒學會...
tenno081 iT邦新手 3 級 ‧ 2021-06-22 09:07:38 檢舉
痾我確實還正在學,不過跟綁定沒關係,目前我把
createApp這段挪到layout,後來有暫時有我要的結果所以可以繼續往下做
抱歉阿,問了有點蠢的問題

1 個回答

0
iT邦新手 5 級 ‧ 2021-06-22 17:13:59
最佳解答

把事件綁上去 在methods加上你的function應該就可以執行了

<a href="#" :id="item.id" data-price="0.5" class="add-to-cart btn btn-primary"  @click="AddToCart(item.id)">Add to cart</a>
tenno081 iT邦新手 3 級 ‧ 2021-06-22 20:55:36 檢舉

雖然不是這方面問題不過還是感謝
我後來想想我這問題真的太智障XD

我要發表回答

立即登入回答