Question

我正在尝试为搜索树获取一些数据，但由于无法找到它而无法直接从axios或调用函数来获取数据。

export default {
 name: 'SideNavMenu',
 data () {
  return {
      searchValue: '',
      treeData: this.getData(),
      treeOptions: {

        fetchData(node) {
          this.onNodeSelected(node)

        }
      },
  }
},

在data（）中，我具有treeOptions，我想在其中调用名为onNodeSelected的函数。错误消息是：

“ TypeError：this.onNodeSelected不是函数”

有人可以帮忙吗？

Answer 1

使用this时，您尝试调用 current 对象的成员。

在JavaScript中，使用{}实际上是在创建自己的新对象，因此，该对象需要实现onNodeSelected，或者您需要调用其他函数来调用它放在实现该功能的对象上。

export default {
    name: 'SideNavMenu',
    data () {
        return {
            searchValue: '',
            treeData: this.getData(), // <--- This
            treeOptions: {

            fetchData(node) {
                this.onNodeSelected(node) // <--- and this
            }
        },
    }
},


//are calling functions in this object :
{
    searchValue: '',
    treeData: this.getData(),
    treeOptions: {
    fetchData(node) {
        this.onNodeSelected(node)
    }
},
//instead of the object you probably are thinking

我会避免在对象块内创建对象块，因为代码很快变得不可读，而是在需要时在单个对象内创建函数。

我想如果您也尝试从treeData获取值，也会收到相同的错误消息

Answer 2

您没有在调用函数，也不从函数返回任何东西。也许您正在尝试这样做？

export default {
 name: 'SideNavMenu',
 data () {
  return {
      searchValue: '',
      treeData: this.getData(),
      treeOptions: fetchData(node) {
          return this.onNodeSelected(node)
      },
  }
},

无论如何，将函数放在数据属性内并不是一种好习惯。尝试先用空值声明变量，然后在将数据放入beforeCreate，create或mount的钩子中时进行设置，例如：

export default {
  name: 'SideNavMenu',
  data () {
    return {
      searchValue: '',
      treeData: [],
      treeOptions: {},
    }
  },
  methods: {
    getData(){
      // get data here
    },
    fetchData(node){
       this.onNodeSelected(node).then(options => this.treeOptions = options)
    }
  },
  mounted(){
     this.getData().then(data => this.treeData = data)
  }
},

或者如果您使用的是异步等待：

export default {
  name: 'SideNavMenu',
  data () {
    return {
      searchValue: '',
      treeData: [],
      treeOptions: {},
    }
  },
  methods: {
    getData(){
      // get data here
    },
    async fetchData(node){
       this.treeOptions = await this.onNodeSelected(node) 
    }
  },
  async mounted(){
     this.treeData = await this.getData()
  }
},

data（）属性内的调用函数

2 个答案: