#前提
グレープシティのWijmoというライブラリをLaravel+Vue.jsで利用したいです。
実際に動かしてみたいのは、このデモプログラムになります。
https://demo.grapecity.com/wijmo/demos/Grid/Overview/vue
#実現したいこと
以下のURLで
http://192.168.10.10/sample
デモプログラムを表示したい
#試してみたこと
wijmoの画面(スプレッドシート)が表示されません。
filterが定義されてないみたいなエラーになり、どうすればいいかわかりません。
以下、コードです。
data.js
https://demo.grapecity.com/wijmo/demos/Grid/Overview/vue このデモのdata.jsと同じ
app.blade.php
php
1<!DOCTYPE html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <title>{{ config('app.name', 'Laravel') }}</title> 8 9 <!-- Scripts --> 10 <script src="{{ asset('js/app.js') }}" defer></script> 11 12 <!-- Styles --> 13 <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 14</head> 15<body> 16 <div id="app"> 17 <main class="py-4"> 18 @yield('content') 19 </main> 20 </div> 21</body> 22</html>
sample.blade.php
PHP
1@extends('layouts.app') 2@section('content') 3<wijmo-component></wijmo-component> 4@endsection
WijmoComponent.vue
vue
1<template> 2 <div class="container"> 3 <wj-flex-grid :items-source="data"></wj-flex-grid> 4 </div> 5</template> 6 7<script> 8 export default { 9 mounted() { 10 console.log('Component mounted.') 11 }, 12 } 13</script> 14 15<style> 16.wj-flexgrid { 17 height: 400px; 18 margin: 6px 0; 19} 20 21.grid-sort-group .wj-menu, 22.grid-sort-group .btn { 23 margin: 2px 2px 2px 0; 24} 25</style>
app.js
js
1/** 2 * First we will load all of this project's JavaScript dependencies which 3 * includes Vue and other libraries. It is a great starting point when 4 * building robust, powerful web applications using Vue and Laravel. 5 */ 6 7// wijimo start 8import "@grapecity/wijmo.styles/wijmo.css"; 9// wijimo end 10 11require('./bootstrap'); 12 13// wijimo start 14import * as wjcCore from "@grapecity/wijmo"; 15import * as wjcGrid from "@grapecity/wijmo.grid"; 16import { getCountries, getProducts, getColors, getData } from "./data"; 17import "@grapecity/wijmo.vue2.grid"; 18import "@grapecity/wijmo.vue2.input"; 19// wijimo end 20 21window.Vue = require('vue'); 22 23/** 24 * The following block of code may be used to automatically register your 25 * Vue components. It will recursively scan this directory for the Vue 26 * components and automatically register them with their "basename". 27 * 28 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> 29 */ 30 31// const files = require.context('./', true, /.vue$/i); 32// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)); 33 34Vue.component('wijmo-component', require('./components/WijmoComponent.vue').default); 35 36/** 37 * Next, we will create a fresh Vue application instance and attach it to 38 * the page. Then, you may begin adding components to this application 39 * or customize the JavaScript scaffolding to fit your unique needs. 40 */ 41 42const app = new Vue({ 43 el: "#app", 44 created: function() { 45 this.dataArray = getData(this.itemCount); 46 }, 47 data: { 48 dataMaps: true, 49 formatting: true, 50 filter: '', 51 selection: null, 52 allowAddNew: false, 53 selectionMode: wjcGrid.SelectionMode.CellRange, 54 headersVisibility: wjcGrid.HeadersVisibility.All, 55 showSelectedHeaders: wjcGrid.HeadersVisibility.None, 56 showMarquee: false, 57 itemCount: 500, 58 collectionView: new wjcCore.CollectionView(), 59 dataArray: null 60 }, 61 62 : 63 64 以下、デモプログラムと同じ
あなたの回答
tips
プレビュー