Question

如何通过ag-grid文件集成nuxt.js与nuxt.config一起使用？

我得到的错误：

commons.app.js：16278未捕获的TypeError：无法读取null的属性“ _init”
  在AgGridVue（commons.app.js：16278）
  在Function.Vue.use（commons.app.js：16233）
  在Module ../ plugins / ag-grid.client.js（app.js：5186）
  在 webpack_require （runtime.js：791）
  在fn（runtime.js：151）
  在Module ../。nuxt / index.js（app.js：1997）
  在 webpack_require （runtime.js：791）
  在fn（runtime.js：151）
  在模块。（app.js：236）
  在Module ../。nuxt / client.js（app.js：1308）

ag-grid.client.js：

import Vue from "vue";
import { AgGridVue } from "ag-grid-vue";

Vue.use(AgGridVue);

nuxt.config.js：

 plugins: [
"@/plugins/element-ui",
"@/plugins/tooltip",
"@/plugins/calendar",
"@/plugins/ag-grid.client.js"
],

将表加载到的文件：

<template>
  <div class="flex h-full">
      <no-ssr>

    <ag-grid-vue style="width: 500px; height: 500px;"
                 class="ag-theme-balham"
                 :columnDefs="columnDefs"
                 :rowData="rowData">
    </ag-grid-vue>
</no-ssr>

  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      columnDefs: null,
      rowData: null
    };
  },
  beforeMount() {
    this.columnDefs = [
      { headerName: "Make", field: "make" },
      { headerName: "Model", field: "model" },
      { headerName: "Price", field: "price" }
    ];

    this.rowData = [
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxter", price: 72000 }
    ];
  }
};
</script>

Answer 1

在文件“ ag-grid.client.js”中，您无法使用Vue.use添加组件，需要使用Vue.component并将其在全球范围内注册：

import Vue from 'vue'
import { AgGridVue } from 'ag-grid-vue'

Vue.component('ag-grid-vue', AgGridVue)

然后您无需设置标签“”。

如何将ag-grid实施到nuxt.js中

1 个答案: