質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

受付中

WijmoというライブラリをLaravel+Vue.jsで使用したい

nakayamakana
nakayamakana

総合スコア0

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0回答

0評価

1クリップ

3閲覧

投稿2019/10/14 15:07

#前提
グレープシティの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

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> <script src="{{ asset('js/app.js') }}" defer></script> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app"> <main class="py-4"> @yield('content') </main> </div> </body> </html>

sample.blade.php

PHP

@extends('layouts.app') @section('content') <wijmo-component></wijmo-component> @endsection

WijmoComponent.vue

vue

<template> <div class="container"> <wj-flex-grid :items-source="data"></wj-flex-grid> </div> </template> <script> export default { mounted() { console.log('Component mounted.') }, } </script> <style> .wj-flexgrid { height: 400px; margin: 6px 0; } .grid-sort-group .wj-menu, .grid-sort-group .btn { margin: 2px 2px 2px 0; } </style>

app.js

js

/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ // wijimo start import "@grapecity/wijmo.styles/wijmo.css"; // wijimo end require('./bootstrap'); // wijimo start import * as wjcCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.grid"; import { getCountries, getProducts, getColors, getData } from "./data"; import "@grapecity/wijmo.vue2.grid"; import "@grapecity/wijmo.vue2.input"; // wijimo end window.Vue = require('vue'); /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /\.vue$/i); // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)); Vue.component('wijmo-component', require('./components/WijmoComponent.vue').default); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: "#app", created: function() { this.dataArray = getData(this.itemCount); }, data: { dataMaps: true, formatting: true, filter: '', selection: null, allowAddNew: false, selectionMode: wjcGrid.SelectionMode.CellRange, headersVisibility: wjcGrid.HeadersVisibility.All, showSelectedHeaders: wjcGrid.HeadersVisibility.None, showMarquee: false, itemCount: 500, collectionView: new wjcCore.CollectionView(), dataArray: null },   :   以下、デモプログラムと同じ

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

tanishi_a
tanishi_a

2019/10/14 20:28

> <wj-flex-grid :items-source="data"></wj-flex-grid> ここの指定がサンプルと違うから、ですかね・・? > filterが定義されてないみたいなエラーに そのまま貼った方が良いかと

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。