vue 多次嵌套使用this.$options.methods 导致methods of undefined

问题描述

在compare 中使用this.$options.methods 然后在formatDataPlus里面再次使用this.$options.methods导致报错，

分析原因，就是因为，this指向发生错误，导致报错methods of undefined。所以只需要更改指向即可。

compare (e) {
      if (this.composition1 === '' || this.composition2 === '' || this.composition1 === this.composition2) {
        this.$message({
          message: '请选择合适的选项',
          type: 'warning'
        })
      } else {
        this.$axios({
          url: '/api/classifyCompare',
          method: 'post',
          headers: {'X-CSRFToken': this.getCookie('csrftoken')},
          data: {
            c1: this.composition1,
            c2: this.composition2
          }
        }).then(response => {
          console.log(response.data)
          let data = response.data
          let that = this
          this.table1 = this.$options.methods.formatDataPlus(JSON.stringify(data), that)
          this.table2 = this.$options.methods.formatDataPlus2(JSON.stringify(data))
          console.log('加载完毕')
        }).catch(error => {
          console.log('fail')
          console.log(error.response)
        })
      }
    },
formatDataPlus (da, that) {
      try {
        let data = JSON.parse(da)
        let c1 = data.c1
        let c2 = data.c2
        console.log(typeof c1)
        // eslint-disable-next-line no-unreachable
        c1 = JSON.parse(c1)
        // eslint-disable-next-line camelcase
        var c1_val = Object.values(c1)
        // eslint-disable-next-line no-use-before-define
        console.log(c2_val)
        c2 = JSON.parse(c2)
        // eslint-disable-next-line camelcase
        var c2_val = Object.values(c2)
        let key = Object.keys(c1)
        console.log(c1, c2, c1_val)
        console.log(key)
        let arr = []
        console.log('option:' + that.$options.methods)
        for (var i = 0; i < key.length; i++) {
          arr.push({c0: that.$options.methods.rename(key[i], key), c1: c1_val[i], c2: c2_val[i]})
        }
        console.log(arr)
        return arr
      } catch (e) {
        console.log(e)
      }
    },
    rename (data, keys) {
      let arr = ['ID', '中文名', '拼音', '拉丁语', '英文', '俗名', '生活型', '株', '根', '茎', '叶', '花', '果', '产地', '分布', '生活环境', '物候期', '药材性味', '功能作用']
      for (var i = 0; i < arr.length; i++) {
        if (data === keys[i]) {
          return arr[i]
        }
      }
    },