vue 从A->B页面，然后再由B->A返回来，A页面显示的还是刚刚进来的数据，这个应该怎么做？

  • Z时代
  • 2024-02-19
  • 分类：IT

使用的是vue框架，我现在遇到的问题就是 从seatselection 页面到order订单页面 我的数据已经做好本地存储了，而且order订单页面的数据可以正常渲染, 但是我从order订单页面返回去，
发现之前我选中的座位(绿色)已经变成为空了，底部添加的多少排多少座的也没有了，，我之前试过了keep-alive只缓存这个页面的，但是最后用不了，后面我也直接设置了全部页面使用keep-alive,可以实现，但是本地存储失效了，这个应该要怎么做才行
实现1. order返回来的时候 seatselection 页面显示的内容跟之前的是一样的

vue 从A->B页面，然后再由B->A返回来，A页面显示的还是刚刚进来的数据，这个应该怎么做？

vue 从A->B页面，然后再由B->A返回来，A页面显示的还是刚刚进来的数据，这个应该怎么做？

这个是order订单页面返回来后的
vue 从A->B页面，然后再由B->A返回来，A页面显示的还是刚刚进来的数据，这个应该怎么做？

html 代码
<div class="content">

  <div class="index">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>
    <div class="seat">
      <span>{{show_room}}银幕</span>
        <ul v-for="(item,index) in seatList">
          <li  @click="chose(v)"  v-for="(v,i) in item" :class="selectClass(v)" >
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div class="remarks">
        <!-- 座位解析布局 -->
        <ul>
          <li><span class="a"></span>可选</li>
          <li><span class="b"></span>已售</li>
          <li><span class="c"></span>不可售</li>
        </ul>
      </div>
      <div class="information"> 
        <!-- 当selected有数据的时候才渲染   -->
        <div class="ischose" > 
          <ul>
            <li v-for="item in selected" :key="item.id">
                <span>{{item.x}}排{{item.y}}列</span>
            </li>
          </ul>
        </div>           
      </div>          
        <!-- 购票按钮 --> 
       <button class="button" @click="goTo"  v-show="!isSelect">确认选座</button>
      <button class="button" v-show="isSelect">请先选座</button>
    </div>

js代码
//点击选座

chose(v){ 
    if(v.state==0){//如果等于0，还有座位
         this.isSelect=false;//让他可以选座购票
         v.state=1  //让他显示选中状态
      }else if(v.state==1){ 
         v.state=0  //当你选了让他变成0  
      }else if(v.state==2){  //说明已经有人买了，不能点击
         Toast("别人已经买了")
         return;
      }
      if(this.datalist.length=1){//当选中第一个座位的时候显示确认选座
          this.isSelect=false;
      }

//选座的样式判断json 返回的数据配对不同的class样式点击座位切换对应的样式

selectClass(v){
      if(v.state==2){
         return "red"
      }else if(v.state==1){
         return "green"
      }else if(v.state==3){
         return "hidden"
      }
}

computed:{

  selected(){
      var arr = []
      var index =0;
      for(let i=0;i<this.seatList.length;i++){//遍历行
          for(let j=0;j<this.seatList[i].length;j++){//遍历列
              if(this.seatList[i][j].state==1){//当是选中状态
                  let tem={id:index++,x:i+1,y:j+1}
                 if(arr.length <4){//当我们选中的个数小于等于4个了，就继续可以选座，否则选择不了
                    arr.push(tem);//一般我们的数组长度是0开始的
                      var arrs = JSON.stringify(arr)
                      localStorage.setItem("arrs",arrs)//先将添加的数据存储在本地 
                 }else{
                  Toast("一个人只能购买4张票")
                  exit;
                 }    
              }
          }
      }
      this.datalist = arr
      if(this.datalist.length<=0){//当我们取消了座位，一个座位都没有选中就显示请先选座
        this.isSelect=true;
      }
      return arr
 }
},

以上是 vue 从A-&gt;B页面，然后再由B-&gt;A返回来，A页面显示的还是刚刚进来的数据，这个应该怎么做？ 的全部内容， 来源链接： utcz.com/p/935630.html

回到顶部