使用el-cascader时设置lazyLoad需要注意方法中this的作用域

项目场景:

使用ele-ui实现一个地区级联选择


问题描述:

选择地区时懒加载,需要设置lazyLoad属性,代码如下,控制台提示找不到this.$api

lazyLoad(node, resolve): {
          let nodes = [];
          if (node.level > 1) {
            resolve(nodes);
            return;
          }
          let parentid = 1;
          if (node) {
            parentid = node.value;
          }
          const data = {
            parentid: parentid,
          };
          this.$api("freight","getRegionsByParentid",data)
            .then((response) => {
              nodes = response.data;
              resolve(nodes);
            });
        }

原因分析:

刚开始分析是因为在data中调用方法不正确,后来改为在mounted()中赋值依然无效。再后来发现可能是this指向的作用域有问题


解决方案:

lazyLoad: ((node, resolve) => {
          let nodes = [];
          if (node.level > 1) {
            resolve(nodes);
            return;
          }
          let parentid = 1;
          if (node) {
            parentid = node.value;
          }
          const data = {
            parentid: parentid,
          };
          this.$api("freight","getRegionsByParentid",data)
            .then((response) => {
              nodes = response.data;
              resolve(nodes);
            });
        })

 

你可能感兴趣的:(Vue,vue.js,el-cascader,lazyLoad)