Компонент ag-grid nativescript-vue не регистрируется - PullRequest
Новая
       17

Компонент ag-grid nativescript-vue не регистрируется

0 голосов
/ 28 июня 2019

У меня есть проект nativescript-vue, в который я хотел бы интегрировать ag-grid. Я использую this в качестве руководства, но когда я перехожу на страницу, где находится сетка, я получаю следующее: 

CONSOLE LOG file:///app/vendor.js:59600:14: \134^[[32m'{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> AppendChild(ElementNode(nativestacklayout), ElementNode(nativeabsolutelayout))'\134^[[39m
CONSOLE ERROR file:///app/vendor.js:53456:20: [Vue warn]: Unknown custom element: <div> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <AgGridVue>
<Page>
<Home> at components/Home/Home.vue
<NavigationEntry>
CONSOLE LOG file:///app/vendor.js:59600:14: \134^[[32m'{NSVue (Vue: 2.5.17 | NSVue: 2.0.2)} -> CreateElement(div)'\134^[[39m

Я установил через:

установка в минуту - сохранить ag-grid-community ag-grid-vue вя-свойство-декоратор

Вот мои настройки:

app.js 

import Vue from "nativescript-vue";
...

const  vn = new Vue({
  render: h => h('frame', [h(routes.home)])
}).$start();

Home.vue (перенаправлено с другой страницы vue) 

<template>
    <Page class="page">
        <ActionBar title="home" class="action-bar" icon="" />
          <ScrollView>
            <StackLayout flexDirection="column" justifyContent="center" class="full-height">
            <Label textWrap="true" text="My Home"/>
            <ag-grid-vue style="width: 400px; height: 400px;"
                class="ag-theme-balham" :columnDefs="columnDefs"
                :rowData="rowData">
            </ag-grid-vue>
         </ScrollView>
    </Page>
</template> 

<script>
    import { AgGridVue } from "ag-grid-vue";
    export default {
            props:['userId'],
            data() {
                return {
                    textFieldValue: "",
                    columnDefs: null,
                    rowData: null
                };
            },
            components: {
                AgGridVue,
            },
            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
                    }
                ];
            },
            methods:{
            ...
            }
  </script>

  <style lang="scss">
        @import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
        @import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
  </style>
...