初学vue,只是想要假数据来模拟一下
目的:实现点击这个按钮就会在页面加载新数据
实现:直接在数组里,改变数组(push函数)来达到重新渲染页面的目的
在这里插入图片描述
1.页面v-for渲染代码

   <div class="cmt-item" v-for="item in comList":key>
      <div class="cmt-title">
        {{ item.time }}
      </div>

      <div class="cmt-body">
        {{ item.body}}
      </div>

2.给按钮添加事件后
第一遍出错代码

 methods:{
          getCom()
          {

            var newComList=[
              { time:"第五楼 用户:匿名用户 发表时间:2020-08-20 16:11",
                body:"玩梗无聊"},
              { time:"第六楼 用户:匿名用户 发表时间:2020-08-20 16:11",
                body:"有点意思"},
              { time:"第七楼 用户:匿名用户 发表时间:2020-08-20 16:11",
                body:"快来对暗号"}
            ];
            this.comList.push(newComList); //comList data中父数组
            newComList="";
          }
      }
    }

3.点击加载后页面数据没有更新,利用工具查看数据是否存入父数组中
在这里插入图片描述

我们可以看到数据已经存到data中的数组中去了,但是仔细观察发现,后存进去的数据明显数据结构不对,所以这次渲染失败的原因可以确定是存储格式有问题,发现了问题所在就可以开始解决了
重新更改代码:

  methods:{
          getCom()
          {

            var newComList=[
              { time:"第五楼 用户:匿名用户 发表时间:2020-08-20 16:11",
                body:"玩梗无聊"},
              { time:"第六楼 用户:匿名用户 发表时间:2020-08-20 16:11",
                body:"有点意思"},
              { time:"第七楼 用户:匿名用户 发表时间:2020-08-20 16:11",
                body:"快来对暗号"}
            ];
            for(var j=0;j<3;j++)
            {
              this.comList.push(newComList[j])
            }
          }
      }
    }

4.运行成功,渲染界面成功,用工具看一下数据
在这里插入图片描述
结构一致

作为小白,我觉得我最缺少的能力就是如何分析出问题出在哪里,怎么造成的,如何解决
共勉

Logo

前往低代码交流专区

更多推荐