跳至主要內容

小程序商品sku选择

起凡大约 2 分钟起凡商城商品管理商品SKU小程序

小程序商品sku选择

小程序商品sku选择对话框
小程序商品sku选择对话框

后端加载商品详情

关联商品SKU

@Entity
@GenEntity
public interface Product extends BaseEntity {
    // 忽略...
  @OneToMany(mappedBy = "product")
  List<ProductSku> skuList();
}




 
 

使用SKU选择对话框组件

  • :key="chosenProduct.id"当点击不同的商品时,SKU对话框需要重新渲染,要不然上一个商品的数据缓存还在。
<template>
  <product-sku-dialog
    v-if="chosenProduct"
    :key="chosenProduct.id"
    v-model:visible="dialogVisible"
    :product="chosenProduct"
  ></product-sku-dialog>
  <walter-fall :data-list="pageData.content" class="product-walter-fall">
    <template #itemLeft="{ item }">
      <product-cover
        :product="item"
        @click="handleChoose(item.id)"
      ></product-cover>
    </template>
    <template #itemRight="{ item }">
      <product-cover
        :product="item"
        @click="handleChoose(item.id)"
      ></product-cover>
    </template>
  </walter-fall>
  <register-popup></register-popup>
</template>

 
 
 
 
 
 




 





 





提示

在vue中如果存在相同的key值,它会选择复用已有DOM元素而不是创建新的元素。这样可以节省内存,并且维持组件的状态。