使用 jQuery 讀取 Vue 元件的資料

zhaiduting發表於2018-12-31
jQueryVue元件

當問及jQuery如何與Vue元件通訊的問題時，或許有人會嗤之以鼻：你都用了Vue了還用啥jQuery啊？彷彿有了Vue這把屠龍刀，就應該丟掉jQuery這把倚天劍，如此一來雙手舞大刀才會更爽。鄙人認為，程式這東東不可與武器一併而論，用啥方便就用啥！

本文就簡單探討一下【使用jQuery讀取Vue元件的資料】一種簡單方法。

首先，在Laravel的blade模版中將資料庫查詢到的複雜物件$cartItems傳遞給Vue元件

<cart-items :items="{{$cartItems}}"></cart-items>

然後，利用Vue元件的便利，對這個複雜物件進行想要的加工處理（如：勾選或不勾選，選框禁用，標記已下架的狀態，刪除購物車某一項，求和計算等等）。這裡使用Vue的原因是因為用Vue處理這些瑣碎細節實在太方便了。加工處理的最終結果是得到一個叫做items的陣列，類似於下面這樣子：

items=[
    { "amount": 2, "sku_id": 25, "sku_price": "5765.00" }, 
    { "amount": 12, "sku_id": 29, "sku_price": "8789.00" } 
]

陣列中的sku_price屬性僅僅是方便Vue做求和計算特地引入的。後端程式可以通過sku_id查詢到商品真實價格。
file
另外，在cart-items這個Vue元件的下方，還有一個表單。表單與Vue元件的關係大致如下：

<cart-items :items="{{$cartItems}}"></cart-items>
<form id="order-form">
    <select name="address">
        @foreach($addresses as $address)
            <option value="{{$address->id}}">
            {{$address->province}}{{$address->city}}{{$address->district}}，{{$address->contact_phone}}
            </option>
        @endforeach
    </select>
<textarea name="remark"></textarea>
<button  class=" btn-create-order">提交訂單</button>
</form>

這裡，元件cart-items並沒有被form表單包含。Form表單僅僅包含一個address下拉選單、remark備註和一個提交按鈕。點選提交按鈕會執行一段jQuery程式碼，內容如下

$(function(){
    $('.btn-create-order').click(function(){
        $req={
            address_id: $('#order-form select[name=address]').val(),
            remark: $('#order-form textarea[name=remark]').val(),
            items: app.items,
        }
        console.log($req)
    })
})

可以看到，jQuery讀取Vue元件加工後的陣列items的方法是使用語句【 items: app.items 】，這是如何實現的？方法超級簡單，只需要在vue元件中將想要對外暴露的資料加上這個【 app.items=items 】即可！也就是通過app這東西從元件內部取出資料，然後提供給jQuery使用。

相關文章