将v-for当前项信息从列表带到详情

最新推荐文章于 2024-01-01 10:03:16 发布

原创最新推荐文章于 2024-01-01 10:03:16 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

记录专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的商品瀑布流列表组件，该组件能够展示商品图片、标题、简介、价格等信息，并提供了点击商品图片跳转到详情页的功能。在详情页中，通过localStorage存储和读取商品数据。

<WaterfallItem v-for="(item, index) in caseList" :key="index" :order="index">

  <div v-if="item.num>item.sell_num" class="itemImg" :id="item.id" :data="host+item.img_url"  @click="clickImg(item)">
    <div class="img_show"><img :src="host+item.img_url"></div>
    <div class="goodsTit">{{item.title}}:</div> <div class="goodsIntro" v-html="item.remark"></div>
    <p class="inPrice"><i>¥ {{item.price}}</i> <span class="fr">价格：{{item.in_price}}</span></p>
    <p class="numPage">总：{{item.num}} <span class="fr">已卖：{{item.sell_num}}</span></p>
    <!-- <div class="share">
        <span><a href="javascript:void(0);"><img src="../../../static/images/qzone.png"></a></span>
        <span><a href="https://weibo.com/u/3818321066/home?wvr=5"><img src="../../../static/images/weibo.png"></a></span>
        <span><a href="javascript:void(0);"><img src="../../../static/images/weixin.png"></a></span>
    </div> -->
  </div>
</WaterfallItem>

clickImg(item){//点击跳转
  //存储当前点击元素绑定的数据（这里需要将数据转化为字符串，因localStorage只能存字符串），在跳转后的页面将其转为JSON格式
  localStorage.setItem('goodsItem',JSON.stringify(item));
  localStorage.setItem('host',this.host);
  this.$router.push("/oneBuyList");
}

详情页中

created(){
  this.goods=JSON.parse(localStorage.getItem("goodsItem"))
},