出现问题:

我的计算属性在这儿进行了slice的字符串切片,但是回到浏览器发现,控制台报错了(虽然报错,但功能正常)。浏览器提示说我的slice未定义,可是,这个slice()是个方法啊。咱就继续找问题。

computed: {
    operateName() {
      if (this.treeNode.code === '11111000') {
        return '二级学院'
      } else if (this.treeNode.code.slice(0, 4) === '1111') {
        return '专业'
      } else {
        return '班级'
      }
    }

会不会是slice()前面的数据有问题?那就看看 treeNode.code 是怎么得到的,先是父组件调用接口,获取数据给树形组件。

父组件用插槽传给子组件1,。

子组件1将单个节点的数据回传给父组件。

 父组件再将接收到的数据传给子组件2

 这个数据是经历了2次数据传递,导致vue无法识别出其中是否有code属性,此时code值默认为undefind,再用slice()去分割就报错咯。

解决办法:

先判断是否存在code,再进行切片,浏览器就不会报错了。

computed: {
    operateName() {
      if (this.treeNode.code === '11111000') {
        return '二级学院'
      } else if (this.treeNode.code && this.treeNode.code.slice(0, 4) === '1111') {
        return '专业'
      } else {
        return '班级'
      }
    }

 

 

Logo

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

更多推荐