场景描叙

• 我是使用钩子函数获取后台数据，想将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就是这个方法，需要就百度一下