在 data() 属性中调用函数答案

【问题标题】：call function inside data() property在 data() 属性中调用函数
【发布时间】：2019-09-02 05:11:37
【问题描述】：

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

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

        fetchData(node) {
          this.onNodeSelected(node)

        }
      },
  }
},

在 data() 中，我有 treeOptions，我想在其中调用一个名为 onNodeSelected 的函数。错误信息是：

“TypeError：this.onNodeSelected 不是函数”

有人可以帮忙吗？

【问题讨论】：

你应该创建一个method: fetchWithAxios() { ... } 让它将信息放在this.treeData 中，该方法应该在beforeCreate: 中调用。
我想动态地将孩子添加到树中，所以如果我在 beforeCreate 中这样做，我认为我不能这样做？

标签： javascript vue.js axios vue-cli

【解决方案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 获取值，您也会收到相同的错误消息

【讨论】：

在 VueJS 中，this. 指向当前对象，在这种情况下，this = export.default. 其中getData() 可以是method: 部分内的函数...跨度>
我从调用中获得了正确的数据：treeData: this.getData() 但无法从 fetchData 函数中获得它，这是为什么？
没错，我的回答适用于 JavaScript，可能与 VueJS 的实际解决方案不同。不过，也许你可以从中找到一些线索，找到自己的解决方案。

【解决方案2】：

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

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

无论如何，将函数放在数据属性中并不是一种好的做法。尝试先用空值声明变量，然后在获取 beforeCreate、created 或mounted 钩子中的数据时设置它们，如下所示：

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

【讨论】：