EasyUI Forum
March 28, 2024, 05:16:45 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: help project vue  (Read 8116 times)
weimars
Newbie
*
Posts: 1


View Profile Email
« on: September 25, 2020, 11:27:59 AM »

hola estoy tratando de crear un proyecto en vue he tenido inconvenientes
https://www.jeasyui.com/download/vx.php

I get an error attached image

app.vue

<template>
<div id="app">
    <data-grid></data-grid>
</div>
</template>

<script>
import DataGrid from './components/DataGrid.vue'
export default {
    name: 'App',
    components: {
        'data-grid': DataGrid
    }
}
</script>

--DataGrid.vue
<template>
<div class="data">
    <DataGrid :data="data" style="height:150px">
        <GridColumn field="itemid" title="Item ID"></GridColumn>
        <GridColumn field="name" title="Name"></GridColumn>
        <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
        <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
        <GridColumn field="attr" title="Attribute" align="center"></GridColumn>
        <GridColumn field="status" title="Status" align="center"></GridColumn>
    </DataGrid>
</div>
</template>

<script>
export default {
    name: 'DataGrid',
    data() {
        return {
            data: [{
                    "code": "FI-SW-01",
                    "name": "Koi",
                    "unitcost": 10.00,
                    "status": "P",
                    "listprice": 36.50,
                    "attr": "Large",
                    "itemid": "EST-1"
                },
                {
                    "code": "K9-DL-01",
                    "name": "Dalmation",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 18.50,
                    "attr": "Spotted Adult Female",
                    "itemid": "EST-10"
                },
                {
                    "code": "RP-SN-01",
                    "name": "Rattlesnake",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 38.50,
                    "attr": "Venomless",
                    "itemid": "EST-11"
                },
                {
                    "code": "RP-SN-01",
                    "name": "Rattlesnake",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 26.50,
                    "attr": "Rattleless",
                    "itemid": "EST-12"
                },
                {
                    "code": "RP-LI-02",
                    "name": "Iguana",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 35.50,
                    "attr": "Green Adult",
                    "itemid": "EST-13"
                },
                {
                    "code": "FL-DSH-01",
                    "name": "Manx",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 158.50,
                    "attr": "Tailless",
                    "itemid": "EST-14"
                },
                {
                    "code": "FL-DSH-01",
                    "name": "Manx",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 83.50,
                    "attr": "With tail",
                    "itemid": "EST-15"
                },
                {
                    "code": "FL-DLH-02",
                    "name": "Persian",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 23.50,
                    "attr": "Adult Female",
                    "itemid": "EST-16"
                },
                {
                    "code": "FL-DLH-02",
                    "name": "Persian",
                    "unitcost": 12.00,
                    "status": "P",
                    "listprice": 89.50,
                    "attr": "Adult Male",
                    "itemid": "EST-17"
                },
                {
                    "code": "AV-CB-01",
                    "name": "Amazon Parrot",
                    "unitcost": 92.00,
                    "status": "P",
                    "listprice": 63.50,
                    "attr": "Adult Male",
                    "itemid": "EST-18"
                }
            ]
        }
    }
}
</script>

--main.js

import Vue from 'vue'
import App from './App.vue'
import 'vx-easyui/dist/themes/default/easyui.css';
import 'vx-easyui/dist/themes/icon.css';
import 'vx-easyui/dist/themes/vue.css';
import EasyUI from  'vx-easyui';

Vue.use(EasyUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


« Last Edit: September 25, 2020, 11:29:50 AM by weimars » Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: September 26, 2020, 08:25:48 PM »

Please rename your own component to another name that is different from 'DataGrid'.

App.vue
Code:
<template>
  <div id="app">
    <data-grid></data-grid>
</div>
</template>

<script>
import MyDataGrid from './MyDataGrid.vue'
export default {
    name: 'App',
    components: {
        'data-grid': MyDataGrid
    }
}
</script>


MyDataGrid.vue
Code:
<template>
  <div class="data">
    <DataGrid :data="data" style="height:150px">
      <GridColumn field="itemid" title="Item ID"></GridColumn>
      <GridColumn field="name" title="Name"></GridColumn>
      <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
      <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
      <GridColumn field="attr" title="Attribute" align="center"></GridColumn>
      <GridColumn field="status" title="Status" align="center"></GridColumn>
    </DataGrid>
  </div>
</template>

<script>
export default {
  name: "MyDataGrid",
  ...
}
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!