Question

我正在尝试从我的created()方法内部访问组件数据，但是它似乎不可用（未定义）。那我该如何访问数据？

<script>
import MainLayout from './MainLayout.vue'
import axios from 'axios'

export default {
  components: { MainLayout },
  data: {
    loading: false,
    mytest: 123,
    table: {
      columns: [],
      data: [],
      total: 0,
    }
  },
  name: 'Entities',
  created: async function() {
    console.log(this.loading, this.table, this.mytest) // undefined, undefined, undefined

  },
}
</script>

Answer 1

请改用方法mounted()。

Answer 2

仍不确定其为何有效，但是将data从对象转换为函数有效：

 data: function () {
    return {
      loading: false,
      mytest: 123,
      table: {
        columns: [],
        data: [],
        total: 0,
      }
    }
  },

Answer 3

我认为这是Vue.js的预防措施-数据属性必须具有功能- 因此，如果使用data属性作为对象而不是返回每个新对象的函数，则vue会显示错误消息

Answer 4

vuejs official doc here ，当您使用.vue单一组件时，数据应该是一个函数，它应该返回数据，如果您在脚本标签内的普通html中使用vue，则可以将数据用作对象

Answer 5

仅当安装了组件时，才可以访问数据本身。

因此，如果要访问data，则应等待安装的组件使用，例如将代码放入mounted生命周期中。

vue.js的created方法中没有data数据

5 个答案: