在data（）属性中调用函数

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时，您尝试调用当前对象的成员。

在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)
      },
  }
},

无论如何，将函数放在数据属性中并不是一种好的做法。首先尝试使用空值声明变量，然后在获取创建，创建或挂载挂钩之前的数据时设置它们，如下所示：

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()
  }
},