场景描叙
  • 我是使用钩子函数获取后台数据,想将java list赋值给vue 集合,我发现需要如何拿到vue的集合,和如何插入数据,这个两个问题

  • 代码

    数据定义代码

export default {
    name: "userIfno",
    data() {
      return {
        userDatas: [
          {userName:'王小虎',userPhone:'1231325123',userAddress:'地址地址'}
        ],
        inputvalue: 'hello'
      }
    }
  • 钩子函数代码
beforeRouteEnter :(to,from,next)=>{
      next(vm => {

        console.log("进入方法");
        vm.axios.get('http://localhost:8080/user/queryAllUser',
          {
            params:{}
          }
        ).then((response)=>{
          console.log("获取数据");
          const result = response.data;
          if(response.data.code == 1){
            // console.log(vm.userDatas.userAddress);
            // vm.tableDatas.splice(0,vm.userDatas.length);
            // console.log("获取当前this");
            // console.log(vm.tableDatas);
            result.list.forEach(item => {
              vm.userDatas.push(item);
            });
            console.log("赋值集合");
            console.log(vm.userDatas);
          }else{
            console.log("获取失败");
          }
        }).catch(function (error) {
          console.log(error);
        }).then(function () {
            // always executed
        });
      });
    }
第一个问题,在钩子函数中获取当前的this
我之前一直写this,一直报错,后来才知道,this根本不是指这个页面实例,之后才知道有这个方法。
next(vm => {}

这个vm就表示当前页面实例this,我发现之后,天真的以为问题解决了,于是,我拿集合的时候如下写到:

vm.data().userDatas

然后就是一直报错,操蛋,之后发现,根本不用写data(),就可以拿到集合了

然后就是最重要的集合赋值
const result = response.data;
result.list.forEach(item => {
              vm.userDatas.push(item);
            });
  • 这个逻辑就和java集合一样了,遍历被后台获取集合,一个一个获取元素,再将添加到vue集合中

  • 还有一个时替换,清理vue集合,vm.userDatas.splice就是这个方法,需要就百度一下

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐