確定SKU

在我們設計sku數據的時候，就已經添加了一個字段：indexes：

這其實就是規格參數的索引組合。

而我們在頁面中，用戶點擊選擇規格后，就會把對應的索引保存起來：

因此，我們可以根據這個indexes來確定用戶要選擇的sku

我們在vue中定義一個計算屬性，來計算與索引匹配的sku：

computed:{sku(){const index = Object.values(this.indexes).join("_");return this.skus.find(s => s.indexes == index);} }

在瀏覽器工具中查看：

渲染sku列表

既然已經拿到了用戶選中的sku，接下來，就可以在頁面渲染數據了

圖片列表

商品圖片是一個字符串，以,分割，頁面展示比較麻煩，所以我們編寫一個計算屬性：images()，將圖片字符串變成數組：

computed: {sku(){const index = Object.values(this.indexes).join("_");return this.skus.find(s=>s.indexes==index);},images(){return this.sku.images ? this.sku.images.split(",") : [''];} },

頁面改造：

<div class="zoom"><!--默認第一個預覽--><div id="preview" class="spec-preview"><span class="jqzoom"><img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/></span></div><!--下方的縮略圖--><div class="spec-scroll"><a class="prev">&lt;</a><!--左右按鈕--><div class="items"><ul><li v-for="(image, i) in images" :key="i"><img :src="image" :bimg="image" onmousemove="preview(this)" /></li></ul></div><a class="next">&gt;</a></div> </div>

效果：

標題和價格

完整效果

?

?

總結

以上是生活随笔為你收集整理的sku选中项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。