real47LEBJ 2022-03-18 17:51 采纳率: 95.7%
浏览 203
已结题

Vue如何解决{{ }} 赋值不能实时刷新的问题

{{ this.locationList[index] }}和{{ this.densityList[index] }} 不能实时更新,需要手动F5刷新才可以更新到页面

 <span>
            检测区域:
            <span
                  style="color: yellow;font-size: 24px;font-weight: bold;margin-right: 10px;">{{
                this.locationList[index]
              }}&nbsp;&nbsp;</span>拥挤度:<span
            style="color: yellow;font-size: 24px;font-weight: bold;">{{ this.densityList[index] }}</span>
          </span>


data() {
    return {
      config: {
      locationList: [],
      densityList: [],
      }
    }
  },

 watch: {
   
    psgList(value) {
      for (const a of value) {

        this.locationList.push(a.location)
        this.densityList.push(a.density)

        console.log(" --------------")
        console.log(this.locationList) //这里浏览器打印截图如下图,修改数据库现有的两条数据会正确传过来但旧的数据不会消失,新数据会一直push在后面,数组越来越大
      }

img

  • 写回答

6条回答 默认 最新

  • 波 吉 2022-03-19 18:43
    关注

    这里面代码粗略看有两个问题(也有可能是题主代码没给全,这边仅供参考下)

    1. 无需在插值语法中,写 this,直接通过 {{locationList[index]}} 读取即可
    2. 题主是否定义了 index 这个变量?我看data中并未声明 index,也就是有可能导致读出来的值是 undefined
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题?

问题事件

  • 系统已结题 3月29日
  • 已采纳回答 3月21日
  • 创建了问题 3月18日

悬赏问题

  • ¥15 爬知乎登录之后内容加载不出来
  • ¥15 怎么用protues测量通频带
  • ¥15 zepelin使用sparkInterpreter 异常
  • ¥15 paho mqtt 接收不到消息
  • ¥15 函数r关于两个分量y,z方向上的图像,分开画r随y的图像,r随z的图像
  • ¥15 如何用Matlab求Pearcey函数的数值积分?
  • ¥15 一个简单的函数定义问题,输出结果是相反的,怎么回事呢?
  • ¥15 页面加载报错,不知道怎么处理
  • ¥20 vue-draggable-resizable选中状态保持
  • ¥15 flink cdc读取SqlServer2016