elementTabs 标签页无法渲染新的数据

 

Tabs标签第一次可以渲染数据,第二次请求数据就无法渲染新数据

<template>
  <div>
    <el-card class="box-card" shadow="always" :body-style="{padding:'0'}"  v-for="(o,index) in order" :key="index">
      <div slot="header" class="clearfix">
        <div>
          <span style="width:504px;" class="ilblock">订单号:<span>{{o.order[0].orderNumber}} {{"("+o.order[0].ORDER_TIME+")"}}</span></span>
          <span class="ilblock" style="width:185px;"> 订单金额:{{o.order[0].ORDER_PRICE}}</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            收货信息<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="address">
            <el-dropdown-item icon="el-icon-place">黄金糕fsdfsdfsdgsdgsddfsdfsd</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
          <div class="order-list-body flex" v-for="(p,index) in o.product" :key="index">
            <div class="order-commodity">
              <a href="http://" target="_blank" rel="noopener noreferrer" class="ilblock fleft">
                <img v-lazy="require('../assets/hengsheng_img/'+p[0].simg)" width="65" height="65" alt="">
              </a>
              <div class="ilblock fleft">
                <span class="ilblock">{{p[0].sname}}</span>
                <p><span>¥{{p[0].sPrice}}</span>x <span>{{o.order[0].product_num}}</span></p>
              </div>
            </div>
            <div class="order-status">
              <span v-if="o.order[0].ORDER_STATUS == 1">未支付</span>
              <span v-else>已支付</span>
            </div>
            <div class="order-operating">
              <p>再次购买</p>
              <p>删除</p>
            </div>
          </div>
        </div>
        
      </div>
    </el-card>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
  </div>
</template>

<script>
export default {
name:'orderList',
  data(){
    return{
      order:"",
      // orderdate:"2021-1-5",
      // orderMoney:"156"
    }
  },
  methods:{
    orderData (val) {
      this.$http({
        url:"/api/orderSelect",
        params:{
          name:this.$store.state.username,
          token:this.$store.state.token,
          orderValue:val
        }
        
      }).then(res =>{
        console.log(res.data);
        this.order = res.data
      }).catch(err =>{
        console.log(err);
        
      })
    },
    
  },
  watch:{
    //监听搜素框所传的值
    orderValue(orderValue){
      if (this.orderValue != "") {
        this.orderData (this.orderValue)
      }
    }
  },
  created(){
    
    this.orderData()
  },
  props:{
    orderValue:String
  },
}
</script>

搜索框传递订单号查询数据返回,dev控制台显示有新的数据,但是页面订单组件没有重新渲染新的数据。请大佬指点

  watch:{
    //监听搜素框所传的值
    orderValue(value){
      if (value != "") {
        this.orderData(value)
      }
    }
  },
 

你父组件那边传值怎么传的,是不是那边值字段写错了?

传值没有问题,后台已经接受到数据并返回来新的数据,但页面不会重新渲染。

您好,我是有问必答小助手,你的问题已经有小伙伴为您解答了问题,您看下是否解决了您的问题,可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

速戳参与调研>>>https://t.csdnimg.cn/Kf0y