teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Vue.js3でag-grid-vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。

編集履歴

質問編集履歴

77

2021/05/27 22:11

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- 何かレンダリングする方法が必要という部分までわかってはいるのですが、
9
+ 何かVue.jsでレンダリングする方法が必要という部分までわかってはいるのですが、
10
-
11
- ag-grid-vueの問題というより、vue.jsでレンダリングする方法の問題かもしれません。
12
10
 
13
11
 
14
12
 

76

2021/05/27 22:11

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- 何かレンダリングする方法が必要という部分までしかわかっていないのですが、
9
+ 何かレンダリングする方法が必要という部分までわかってはいるのですが、
10
10
 
11
11
  ag-grid-vueの問題というより、vue.jsでレンダリングする方法の問題かもしれません。
12
12
 

75

2021/05/27 22:11

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -194,7 +194,7 @@
194
194
 
195
195
  [Vue warn]: Component is missing template or render function.
196
196
 
197
- at <AgGridVue style= Object class="ag-theme-alpine" columnDefs= Array(3) ... >
197
+ at <AgGridVue style= Object class="ag-theme-balham" columnDefs= Array(3) ... >
198
198
 
199
199
  at <Test>
200
200
 

74

2021/05/27 14:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -168,7 +168,7 @@
168
168
 
169
169
  style="width: 500px; height: 300px;"
170
170
 
171
- class="ag-theme-alpine"
171
+ class="ag-theme-balham"
172
172
 
173
173
  :columnDefs="columnDefs"
174
174
 

73

修正

2021/05/27 13:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
 
56
56
 
57
- <!-- 直接読む場合、unpkgは直接読めるかわからないですが、scriptのurlを記載します。
57
+ <!-- 直接読む場合、unpkgは直接読めないと思いますが、urlを記載します。
58
58
 
59
59
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-grid.min.css" />
60
60
 

72

修正

2021/05/27 11:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -54,13 +54,13 @@
54
54
 
55
55
 
56
56
 
57
- <!-- unpkgは直接読めるかわからないですが、scriptのurlを記載しておきます。
57
+ <!-- 直接読む場合、unpkgは直接読めるかわからないですが、scriptのurlを記載します。
58
58
 
59
59
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-grid.min.css" />
60
60
 
61
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-theme-balham.min.css" />
61
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-theme-balham.css" />
62
-
62
+
63
- <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/ag-grid-community.min.js"></script>
63
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/ag-grid-community.js"></script>
64
64
 
65
65
  ​<script src="https://unpkg.com/browse/ag-grid-vue3@24.1.1/dist/ag-grid-vue3.umd.js"></script>
66
66
 

71

修正

2021/05/27 11:57

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  <head>
44
44
 
45
+ <!-- ローカルで読み込んでいる方法 -->
46
+
45
47
  <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" />
46
48
 
47
49
  <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" />
@@ -50,6 +52,8 @@
50
52
 
51
53
  <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
52
54
 
55
+
56
+
53
57
  <!-- unpkgは直接読めるかわからないですが、scriptのurlを記載しておきます。
54
58
 
55
59
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-grid.min.css" />

70

修正

2021/05/27 11:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,8 +42,6 @@
42
42
 
43
43
  <head>
44
44
 
45
- <!--
46
-
47
45
  <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" />
48
46
 
49
47
  <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" />
@@ -52,7 +50,7 @@
52
50
 
53
51
  <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
54
52
 
55
- -->
53
+ <!-- unpkgは直接読めるかわからないですが、scriptのurlを記載しておきます。
56
54
 
57
55
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-grid.min.css" />
58
56
 
@@ -61,6 +59,8 @@
61
59
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/ag-grid-community.min.js"></script>
62
60
 
63
61
  ​<script src="https://unpkg.com/browse/ag-grid-vue3@24.1.1/dist/ag-grid-vue3.umd.js"></script>
62
+
63
+ -->
64
64
 
65
65
  </head>
66
66
 

69

修正

2021/05/27 11:54

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  <head>
44
44
 
45
+ <!--
46
+
45
47
  <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" />
46
48
 
47
49
  <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" />
@@ -50,7 +52,17 @@
50
52
 
51
53
  <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
52
54
 
55
+ -->
56
+
57
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-grid.min.css" />
58
+
59
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-theme-balham.min.css" />
60
+
61
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/ag-grid-community.min.js"></script>
62
+
63
+ ​<script src="https://unpkg.com/browse/ag-grid-vue3@24.1.1/dist/ag-grid-vue3.umd.js"></script>
64
+
53
- </head>
65
+ </head>
54
66
 
55
67
  <body>
56
68
 

68

修正

2021/05/27 11:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  何かレンダリングする方法が必要という部分までしかわかっていないのですが、
10
10
 
11
- ag-grid-vueというより、vue.jsでレンダリングする方法の問題かもしれません。
11
+ ag-grid-vueの問題というより、vue.jsでレンダリングする方法の問題かもしれません。
12
12
 
13
13
 
14
14
 

67

修正

2021/05/27 11:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -41,6 +41,10 @@
41
41
  <html>
42
42
 
43
43
  <head>
44
+
45
+ <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" />
46
+
47
+ <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" />
44
48
 
45
49
  <script src="~/lib/ag-grid/ag-grid-community.js"></script>
46
50
 

66

修正

2021/05/27 11:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,8 @@
7
7
 
8
8
 
9
9
  何かレンダリングする方法が必要という部分までしかわかっていないのですが、
10
+
11
+ ag-grid-vueというより、vue.jsでレンダリングする方法の問題かもしれません。
10
12
 
11
13
 
12
14
 

65

修正

2021/05/27 11:42

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でAg grid vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,8 +1,8 @@
1
- Vue.js3でAg grid vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 
5
- 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueで作成したコンポーネントにはレンダリング機能がないため、
5
+ 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、ag-grid-vueで作成したコンポーネントにはレンダリング機能がないため、
6
6
 
7
7
 
8
8
 
@@ -14,13 +14,13 @@
14
14
 
15
15
 
16
16
 
17
- Ag-gridの公式サイト手順は以下のようになっています。
17
+ ag-Gridの公式サイト手順は以下のようになっています。
18
18
 
19
19
  [https://www.ag-grid.com/vue-grid/vue3/](https://www.ag-grid.com/vue-grid/vue3/)
20
20
 
21
21
 
22
22
 
23
- Ag-gridの公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
23
+ ag-Gridの公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
24
24
 
25
25
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
26
26
 

64

修正

2021/05/27 11:40

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -27,8 +27,6 @@
27
27
 
28
28
 
29
29
  html中は、親の<div id="app">、その中にテンプレートのタグ<test>を入れる必要があります。
30
-
31
-
32
30
 
33
31
  ※今までVanillaタイプのag-Gridを使用していましたが、ag-grid-vueを使う必要が出てきました。
34
32
 

63

修正

2021/05/27 11:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -74,7 +74,11 @@
74
74
 
75
75
 
76
76
 
77
- const app = Vue.createApp({ });
77
+ const app = Vue.createApp({
78
+
79
+ // 本体のApp
80
+
81
+ });
78
82
 
79
83
 
80
84
 

62

修正

2021/05/27 11:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,4 @@
1
1
  Vue.js3でAg grid vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
2
-
3
-
4
-
5
- ここではAg grid vueで作成したコンポーネントをレンダリングしようとしています。
6
2
 
7
3
 
8
4
 

61

修正

2021/05/27 11:38

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でコンポーネントをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でAg grid vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3でコンポーネントをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でAg grid vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 

60

修正

2021/05/27 11:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -31,6 +31,12 @@
31
31
 
32
32
 
33
33
  html中は、親の<div id="app">、その中にテンプレートのタグ<test>を入れる必要があります。
34
+
35
+
36
+
37
+ ※今までVanillaタイプのag-Gridを使用していましたが、ag-grid-vueを使う必要が出てきました。
38
+
39
+
34
40
 
35
41
 
36
42
 

59

修正

2021/05/27 11:37

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- どなたかご教授お願いします。
17
+ もしわかるかたいらっしゃいましたら、ご教授お願いします。
18
18
 
19
19
 
20
20
 

58

修正

2021/05/27 11:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- htmlタグは親のid="app"、その中にテンプレートのタグ<test>を入れる必要があります。
33
+ html中は、親の<div id="app">、その中にテンプレートのタグ<test>を入れる必要があります。
34
34
 
35
35
 
36
36
 

57

修正

2021/05/27 11:28

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,11 +6,11 @@
6
6
 
7
7
 
8
8
 
9
- 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueにはそのレンダリング機能がないため、
9
+ 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueで作成したコンポーネントにはレンダリング機能がないため、
10
10
 
11
11
 
12
12
 
13
- なにかレンダリングする方法が必要という部分までしかわかっていないのですが、
13
+ 何かレンダリングする方法が必要という部分までしかわかっていないのですが、
14
14
 
15
15
 
16
16
 
@@ -27,6 +27,10 @@
27
27
  Ag-gridの公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
28
28
 
29
29
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
30
+
31
+
32
+
33
+ htmlタグは親のid="app"、その中にテンプレートのタグ<test>を入れる必要があります。
30
34
 
31
35
 
32
36
 

56

修正

2021/05/27 11:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -130,7 +130,7 @@
130
130
 
131
131
 
132
132
 
133
- // templateで<ag-grid-vue>タグを使うと出力できなかった。
133
+ // コンポーネントにはレンダリング機能がないため、これを使うとエラーした。
134
134
 
135
135
  template: `
136
136
 

55

修正

2021/05/27 11:26

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でag-grid-vueコンポーネントをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でコンポーネントをレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,14 +1,30 @@
1
- Vue.js3でag-grid-vueコンポーネントをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でコンポーネントをレンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 
5
+ ここではAg grid vueで作成したコンポーネントをレンダリングしようとしています。
6
+
7
+
8
+
9
+ 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueにはそのレンダリング機能がないため、
10
+
11
+
12
+
13
+ なにかレンダリングする方法が必要という部分までしかわかっていないのですが、
14
+
15
+
16
+
17
+ どなたかご教授お願いします。
18
+
19
+
20
+
5
- 公式サイト手順は以下のようになっています。
21
+ Ag-gridの公式サイト手順は以下のようになっています。
6
22
 
7
23
  [https://www.ag-grid.com/vue-grid/vue3/](https://www.ag-grid.com/vue-grid/vue3/)
8
24
 
9
25
 
10
26
 
11
- 公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
27
+ Ag-gridの公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
12
28
 
13
29
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
14
30
 
@@ -142,13 +158,7 @@
142
158
 
143
159
 
144
160
 
145
- 表示しているエラーは現在、次の通りになっています。
161
+ 表示しているエラー
146
-
147
- [Vue警告]：コンポーネントにテンプレートまたはレンダリング機能がないと言っていますが、
148
-
149
- どのように対応してよいかわからなく困っています。
150
-
151
-
152
162
 
153
163
  ```Console
154
164
 
@@ -161,11 +171,3 @@
161
171
  at <App>
162
172
 
163
173
  ```
164
-
165
-
166
-
167
- 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueにはレンダリング機能がない？ため、なにかレンダリングする方法が必要という部分までしかわかっていません。
168
-
169
-
170
-
171
- どなたかご教授お願いします。

54

修正

2021/05/27 11:24

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でag-grid-vueをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueコンポーネントをレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3でag-grid-vueをレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueコンポーネントをレンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 

53

修正

2021/05/27 11:22

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -11,10 +11,6 @@
11
11
  公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
12
12
 
13
13
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
14
-
15
-
16
-
17
- どなたかご教授お願いします。
18
14
 
19
15
 
20
16
 
@@ -48,13 +44,7 @@
48
44
 
49
45
  ```javascirpt
50
46
 
51
- // メインコード
52
-
53
-
54
-
55
- // Moduleをインポートする方法がうまくできなかったため、constで対応しました。
47
+ // Moduleをインポートする方法がうまくできなかったため、constで対応しました。exportも利用できる環境ではありません。
56
-
57
- // exportも利用できる環境ではありません。
58
48
 
59
49
  const AgGridVue = window["ag-grid-vue3"];
60
50
 
@@ -160,10 +150,6 @@
160
150
 
161
151
 
162
152
 
163
- 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueにはできないため、なにかレンダリングする方法が必要という部分までしかわかっていません。
164
-
165
-
166
-
167
153
  ```Console
168
154
 
169
155
  [Vue warn]: Component is missing template or render function.
@@ -175,3 +161,11 @@
175
161
  at <App>
176
162
 
177
163
  ```
164
+
165
+
166
+
167
+ 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueにはレンダリング機能がない？ため、なにかレンダリングする方法が必要という部分までしかわかっていません。
168
+
169
+
170
+
171
+ どなたかご教授お願いします。

52

修正

2021/05/27 11:20

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -160,6 +160,10 @@
160
160
 
161
161
 
162
162
 
163
+ 通常ならコンポーネントをtemplate: `<div>test</div>`のように、そのままレンダリングできますが、Ag-grid-vueにはできないため、なにかレンダリングする方法が必要という部分までしかわかっていません。
164
+
165
+
166
+
163
167
  ```Console
164
168
 
165
169
  [Vue warn]: Component is missing template or render function.

51

修正

2021/05/27 11:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -154,6 +154,10 @@
154
154
 
155
155
  表示しているエラーは現在、次の通りになっています。
156
156
 
157
+ [Vue警告]：コンポーネントにテンプレートまたはレンダリング機能がないと言っていますが、
158
+
159
+ どのように対応してよいかわからなく困っています。
160
+
157
161
 
158
162
 
159
163
  ```Console

50

修正

2021/05/27 11:12

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -118,11 +118,13 @@
118
118
 
119
119
 
120
120
 
121
+ // これは表示できました。
122
+
121
- template: `<div>test</div>`
123
+ // template: `<div>test</div>`
122
124
 
123
125
 
124
126
 
125
- /* templateで<ag-grid-vue>タグを使うと出力できなかった。
127
+ // templateで<ag-grid-vue>タグを使うと出力できなかった。
126
128
 
127
129
  template: `
128
130
 
@@ -139,8 +141,6 @@
139
141
  </ag-grid-vue>
140
142
 
141
143
  `
142
-
143
- */
144
144
 
145
145
  });
146
146
 

49

修正

2021/05/27 11:10

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -58,7 +58,7 @@
58
58
 
59
59
  const AgGridVue = window["ag-grid-vue3"];
60
60
 
61
- // いらないかも？ const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
61
+ // この行はいらないかも？ const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
62
62
 
63
63
 
64
64
 
@@ -76,7 +76,7 @@
76
76
 
77
77
  rowData: null
78
78
 
79
- // いらないかも？ modules: AgGridAllCommunityModules
79
+ // この行はいらないかも？ modules: AgGridAllCommunityModules
80
80
 
81
81
  }
82
82
 

48

追記

2021/05/27 11:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -149,3 +149,21 @@
149
149
  app.mount("#app");
150
150
 
151
151
  ```
152
+
153
+
154
+
155
+ 表示しているエラーは現在、次の通りになっています。
156
+
157
+
158
+
159
+ ```Console
160
+
161
+ [Vue warn]: Component is missing template or render function.
162
+
163
+ at <AgGridVue style= Object class="ag-theme-alpine" columnDefs= Array(3) ... >
164
+
165
+ at <Test>
166
+
167
+ at <App>
168
+
169
+ ```

47

2021/05/27 11:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -62,27 +62,7 @@
62
62
 
63
63
 
64
64
 
65
- const app = Vue.createApp({
65
+ const app = Vue.createApp({ });
66
-
67
- data() {
68
-
69
- return {
70
-
71
-
72
-
73
- }
74
-
75
- },
76
-
77
-
78
-
79
- mounted: function () {
80
-
81
-
82
-
83
- }
84
-
85
- });
86
66
 
87
67
 
88
68
 

46

修正

2021/05/27 10:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -53,6 +53,8 @@
53
53
 
54
54
 
55
55
  // Moduleをインポートする方法がうまくできなかったため、constで対応しました。
56
+
57
+ // exportも利用できる環境ではありません。
56
58
 
57
59
  const AgGridVue = window["ag-grid-vue3"];
58
60
 

45

修正

2021/05/27 06:36

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

44

修正

2021/05/27 06:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,13 +2,15 @@
2
2
 
3
3
 
4
4
 
5
- 公式サイトから飛べるリンク先では以下になっています(Vue.js 2の手順にはなっている。)
5
+ 公式サイト手順は以下のようになっています。
6
6
 
7
- [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
7
+ [https://www.ag-grid.com/vue-grid/vue3/](https://www.ag-grid.com/vue-grid/vue3/)
8
8
 
9
9
 
10
10
 
11
- index.jsとapp.jsにファイルを分けないで、index.jsのみで書きたいです。
11
+ 公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
12
+
13
+ [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
12
14
 
13
15
 
14
16
 

43

修正

2021/05/27 04:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -134,7 +134,7 @@
134
134
 
135
135
 
136
136
 
137
- template: "<div>test</div>"
137
+ template: `<div>test</div>`
138
138
 
139
139
 
140
140
 

42

修正

2021/05/27 04:40

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でag-grid-vueをrender()でレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueをレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3でag-grid-vuedをrender()でレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueをレンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 

41

修正

2021/05/27 04:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -132,7 +132,13 @@
132
132
 
133
133
  },
134
134
 
135
+
135
136
 
137
+ template: "<div>test</div>"
138
+
139
+
140
+
141
+ /* templateで<ag-grid-vue>タグを使うと出力できなかった。
136
142
 
137
143
  template: `
138
144
 
@@ -150,6 +156,8 @@
150
156
 
151
157
  `
152
158
 
159
+ */
160
+
153
161
  });
154
162
 
155
163
 
@@ -157,15 +165,3 @@
157
165
  app.mount("#app");
158
166
 
159
167
  ```
160
-
161
-
162
-
163
- Google Chromeのコンソールでエラーする。
164
-
165
- ```Console
166
-
167
- vue.global.js:1287 [Vue warn]: Failed to resolve component: test
168
-
169
- at <App>
170
-
171
- ```

40

修正

2021/05/27 04:38

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  <div id="app">
34
34
 
35
- <ag-grid-vue></ag-grid-vue>
35
+ <test></test>
36
36
 
37
37
  </div>
38
38
 
@@ -82,7 +82,7 @@
82
82
 
83
83
 
84
84
 
85
- app.component = ("agGrid", {
85
+ app.component = ("test", {
86
86
 
87
87
  data() {
88
88
 
@@ -134,16 +134,6 @@
134
134
 
135
135
 
136
136
 
137
- // renderがなにか必要？※いらない気がするが。
138
-
139
- render() {
140
-
141
- return h(this);
142
-
143
- },
144
-
145
-
146
-
147
137
  template: `
148
138
 
149
139
  <ag-grid-vue
@@ -167,3 +157,15 @@
167
157
  app.mount("#app");
168
158
 
169
159
  ```
160
+
161
+
162
+
163
+ Google Chromeのコンソールでエラーする。
164
+
165
+ ```Console
166
+
167
+ vue.global.js:1287 [Vue warn]: Failed to resolve component: test
168
+
169
+ at <App>
170
+
171
+ ```

39

修正

2021/05/27 04:25

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でag-grid-vueをrender()で親の内の子要素として、レンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueをrender()でレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,10 +1,10 @@
1
- Vue.js3でag-grid-vueをrender()で親の内の子要素として、レンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vuedをrender()でレンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 
5
- 公式サイト手順は以下になっています(記事中のstackblitzのリンク先はVue.js 2の手順にはなっている。)
5
+ 公式サイトから飛べるリンク先では以下になっています(Vue.js 2の手順にはなっている。)
6
6
 
7
- [https://www.ag-grid.com/vue-grid/vue3/](https://www.ag-grid.com/vue-grid/vue3/)
7
+ [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
8
8
 
9
9
 
10
10
 
@@ -29,10 +29,6 @@
29
29
  </head>
30
30
 
31
31
  <body>
32
-
33
- <!-- 親　<div id="app">タグの中で、
34
-
35
- 　　　　　子になるのかと思いますが　<ag-grid-vue>タグを使いたいです。 -->
36
32
 
37
33
  <div id="app">
38
34
 
@@ -76,18 +72,6 @@
76
72
 
77
73
 
78
74
 
79
- /* renderはここで実施？ ※returnしたコードしか表示されなかった。親の画面コードを返すだけなので違うかも
80
-
81
- render() {
82
-
83
- return h => h(agGrid);
84
-
85
- },
86
-
87
- */
88
-
89
-
90
-
91
75
  mounted: function () {
92
76
 
93
77
 
@@ -98,9 +82,7 @@
98
82
 
99
83
 
100
84
 
101
- const agGrid = {
102
-
103
- name: "agGrid",
85
+ app.component = ("agGrid", {
104
86
 
105
87
  data() {
106
88
 
@@ -146,19 +128,19 @@
146
128
 
147
129
  ];
148
130
 
131
+
132
+
149
133
  },
150
134
 
151
135
 
152
136
 
153
- /* renderはここで実施？
137
+ // renderがなにか必要？※いらない気がするが。
154
138
 
155
139
  render() {
156
140
 
157
- return h => h(？);
141
+ return h(this);
158
142
 
159
143
  },
160
-
161
- */
162
144
 
163
145
 
164
146
 
@@ -178,7 +160,7 @@
178
160
 
179
161
  `
180
162
 
181
- };
163
+ });
182
164
 
183
165
 
184
166
 

38

修正

2021/05/27 04:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -73,6 +73,18 @@
73
73
  }
74
74
 
75
75
  },
76
+
77
+
78
+
79
+ /* renderはここで実施？ ※returnしたコードしか表示されなかった。親の画面コードを返すだけなので違うかも
80
+
81
+ render() {
82
+
83
+ return h => h(agGrid);
84
+
85
+ },
86
+
87
+ */
76
88
 
77
89
 
78
90
 

37

修正

2021/05/27 03:50

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -138,13 +138,15 @@
138
138
 
139
139
 
140
140
 
141
+ /* renderはここで実施？
142
+
141
143
  render() {
142
144
 
143
- // renderはここで実施？
144
-
145
- return; // return h => h(？);
145
+ return h => h(？);
146
146
 
147
147
  },
148
+
149
+ */
148
150
 
149
151
 
150
152
 

36

修正

2021/05/27 03:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -106,6 +106,14 @@
106
106
 
107
107
 
108
108
 
109
+ components: {
110
+
111
+ AgGridVue
112
+
113
+ },
114
+
115
+
116
+
109
117
  beforeMount() {
110
118
 
111
119
  this.columnDefs = [
@@ -125,8 +133,6 @@
125
133
  { make: 'Toyota', model: 'Celica', price: 35000 }
126
134
 
127
135
  ];
128
-
129
-
130
136
 
131
137
  },
132
138
 

35

修正

2021/05/27 03:45

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -76,16 +76,6 @@
76
76
 
77
77
 
78
78
 
79
- render() {
80
-
81
- // renderがうまくいかなかった。htmlのidタグの使い方もまちがっているかも。
82
-
83
- return h => h(agGrid)
84
-
85
- },
86
-
87
-
88
-
89
79
  mounted: function () {
90
80
 
91
81
 
@@ -142,6 +132,16 @@
142
132
 
143
133
 
144
134
 
135
+ render() {
136
+
137
+ // renderはここで実施？
138
+
139
+ return; // return h => h(？);
140
+
141
+ },
142
+
143
+
144
+
145
145
  template: `
146
146
 
147
147
  <ag-grid-vue

34

修正

2021/05/27 03:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,9 @@
30
30
 
31
31
  <body>
32
32
 
33
+ <!-- 親　<div id="app">タグの中で、
34
+
33
- <!-- 親　<div id="app">タグの中で、 子になるのかと思いますが　<ag-grid-vue>タグを使いたいです。 -->
35
+ 　　　　　子になるのかと思いますが　<ag-grid-vue>タグを使いたいです。 -->
34
36
 
35
37
  <div id="app">
36
38
 

33

修正

2021/05/27 03:41

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  <body>
32
32
 
33
- <!-- <div id="app">タグの中で、 <ag-grid-vue>タグを使いたい、分ける必要がある？ -->
33
+ <!-- 親　<div id="app">タグの中で、 子になるのかと思いますが　<ag-grid-vue>タグを使いたいです。 -->
34
34
 
35
35
  <div id="app">
36
36
 

32

修正

2021/05/27 03:41

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でag-grid-vueをrender()でレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueをrender()で親の内の子要素として、レンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3でag-grid-vueをrender()でレンダリングする方法がわからなくて困っています。
1
+ Vue.js3でag-grid-vueをrender()で親の内の子要素として、レンダリングする方法がわからなくて困っています。
2
2
 
3
3
 
4
4
 

31

修正

2021/05/27 03:40

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  <body>
32
32
 
33
- <!-- <div id="app">タグの中で、 <ag-grid-vue>タグを使いたい -->
33
+ <!-- <div id="app">タグの中で、 <ag-grid-vue>タグを使いたい、分ける必要がある？ -->
34
34
 
35
35
  <div id="app">
36
36
 

30

修正

2021/05/27 03:35

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -96,7 +96,7 @@
96
96
 
97
97
  const agGrid = {
98
98
 
99
- name: "ag-grid-vue",
99
+ name: "agGrid",
100
100
 
101
101
  data() {
102
102
 

29

修正

2021/05/27 03:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -29,6 +29,8 @@
29
29
  </head>
30
30
 
31
31
  <body>
32
+
33
+ <!-- <div id="app">タグの中で、 <ag-grid-vue>タグを使いたい -->
32
34
 
33
35
  <div id="app">
34
36
 

28

修正

2021/05/27 03:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -73,6 +73,8 @@
73
73
 
74
74
 
75
75
  render() {
76
+
77
+ // renderがうまくいかなかった。htmlのidタグの使い方もまちがっているかも。
76
78
 
77
79
  return h => h(agGrid)
78
80
 

27

修正

2021/05/27 03:31

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -72,11 +72,9 @@
72
72
 
73
73
 
74
74
 
75
- // renderがここに必要？？returnのコードがそのまま表示されてしまいました。
76
-
77
75
  render() {
78
76
 
79
- return h => h(app2)
77
+ return h => h(agGrid)
80
78
 
81
79
  },
82
80
 
@@ -92,9 +90,9 @@
92
90
 
93
91
 
94
92
 
95
- // Appは今回できれば2つは作りたくない
93
+ const agGrid = {
96
94
 
97
- const app2 = Vue.createApp({
95
+ name: "ag-grid-vue",
98
96
 
99
97
  data() {
100
98
 
@@ -154,7 +152,7 @@
154
152
 
155
153
  `
156
154
 
157
- });
155
+ };
158
156
 
159
157
 
160
158
 

26

修正

2021/05/27 03:30

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -92,7 +92,7 @@
92
92
 
93
93
 
94
94
 
95
- // Appは2つは作りたくない
95
+ // Appは今回できれば2つは作りたくない
96
96
 
97
97
  const app2 = Vue.createApp({
98
98
 

25

修正

2021/05/27 03:25

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -72,15 +72,13 @@
72
72
 
73
73
 
74
74
 
75
- /* renderがここに必要？？
75
+ // renderがここに必要？？returnのコードがそのまま表示されてしまいました。
76
76
 
77
77
  render() {
78
78
 
79
79
  return h => h(app2)
80
80
 
81
81
  },
82
-
83
- */
84
82
 
85
83
 
86
84
 

24

修正

2021/05/27 03:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -58,8 +58,6 @@
58
58
 
59
59
 
60
60
 
61
- // export const App = Vue.createApp({
62
-
63
61
  const app = Vue.createApp({
64
62
 
65
63
  data() {
@@ -78,17 +76,17 @@
78
76
 
79
77
  render() {
80
78
 
81
- return h => h(App)
79
+ return h => h(app2)
82
80
 
83
81
  },
84
82
 
85
- */
83
+ */
86
84
 
87
85
 
88
86
 
89
87
  mounted: function () {
90
88
 
91
-
89
+
92
90
 
93
91
  }
94
92
 
@@ -96,7 +94,9 @@
96
94
 
97
95
 
98
96
 
97
+ // Appは2つは作りたくない
98
+
99
- app.component("ag-grid-vue", {
99
+ const app2 = Vue.createApp({
100
100
 
101
101
  data() {
102
102
 
@@ -109,14 +109,6 @@
109
109
  // いらないかも？ modules: AgGridAllCommunityModules
110
110
 
111
111
  }
112
-
113
- },
114
-
115
-
116
-
117
- components: {
118
-
119
- AgGridVue
120
112
 
121
113
  },
122
114
 
@@ -164,7 +156,7 @@
164
156
 
165
157
  `
166
158
 
167
- })
159
+ });
168
160
 
169
161
 
170
162
 

23

修正

2021/05/27 03:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- 公式サイトから飛べるリンク先では以下になっています(Vue.js 2の手順にはなっている。)
5
+ 公式サイト手順は以下になっています(記事中のstackblitzのリンク先はVue.js 2の手順にはなっている。)
6
6
 
7
- [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
7
+ [https://www.ag-grid.com/vue-grid/vue3/](https://www.ag-grid.com/vue-grid/vue3/)
8
8
 
9
9
 
10
10
 

22

修正

2021/05/27 03:21

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 公式サイトから飛べるリンク先のコードでの手順は以下になっています(Vue.js 2の手順にはなっている。)
5
+ 公式サイトから飛べるリンク先では以下になっています(Vue.js 2の手順にはなっている。)
6
6
 
7
7
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
8
8
 

21

修正

2021/05/27 03:09

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 公式サイトの手順は以下になっています(Vue.js 2の手順にはなっている。)
5
+ 公式サイトから飛べるリンク先のコードでの手順は以下になっています(Vue.js 2の手順にはなっている。)
6
6
 
7
7
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
8
8
 

20

修正

2021/05/27 03:08

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
  const AgGridVue = window["ag-grid-vue3"];
56
56
 
57
- const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
57
+ // いらないかも？ const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
58
58
 
59
59
 
60
60
 
@@ -104,9 +104,9 @@
104
104
 
105
105
  columnDefs: null,
106
106
 
107
- rowData: null,
107
+ rowData: null
108
108
 
109
- modules: AgGridAllCommunityModules
109
+ // いらないかも？ modules: AgGridAllCommunityModules
110
110
 
111
111
  }
112
112
 

19

修正

2021/05/27 03:06

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 公式サイトの手順は以下になっています(vue 2の手順になっている。)
5
+ 公式サイトの手順は以下になっています(Vue.js 2の手順にはなっている。)
6
6
 
7
7
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
8
8
 

18

修正

2021/05/27 03:03

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 公式サイトの手順は以下になっていますが、
5
+ 公式サイトの手順は以下になっています(vue 2の手順になっている。)
6
6
 
7
7
  [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
8
8
 
@@ -74,6 +74,18 @@
74
74
 
75
75
 
76
76
 
77
+ /* renderがここに必要？？
78
+
79
+ render() {
80
+
81
+ return h => h(App)
82
+
83
+ },
84
+
85
+ */
86
+
87
+
88
+
77
89
  mounted: function () {
78
90
 
79
91
 
@@ -107,18 +119,6 @@
107
119
  AgGridVue
108
120
 
109
121
  },
110
-
111
-
112
-
113
- /* renderが必要？？
114
-
115
- render() {
116
-
117
-
118
-
119
- },
120
-
121
- */
122
122
 
123
123
 
124
124
 

17

修正

2021/05/27 03:03

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3でag-grid-vueをレンダリングできなくて困っています。
1
+ Vue.js3でag-grid-vueをrender()でレンダリングする方法がわからなくて困っています。
test CHANGED
@@ -1,22 +1,4 @@
1
- Vue.js3でag-grid-vueをレンダリングできなくて困っています。
1
+ Vue.js3でag-grid-vueをrender()でレンダリングする方法がわからなくて困っています。
2
-
3
-
4
-
5
- ```Console
6
-
7
- // Google Chromeのコンソール表示
8
-
9
- [Vue warn]: Component is missing template or render function.
10
-
11
- at <AgGridVue style= {width: "500px", height: "300px"} class="ag-theme-alpine" columnDefs= (3) [{…}, {…}, {…}] ... >
12
-
13
- at <App>
14
-
15
- ```
16
-
17
-
18
-
19
- コンポーネントにテンプレートまたはレンダリング機能がありませんといっているようです
20
2
 
21
3
 
22
4
 

16

修正

2021/05/27 03:01

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  公式サイトの手順は以下になっていますが、
24
24
 
25
- https://stackblitz.com/edit/ag-grid-vue-hello-world
25
+ [https://stackblitz.com/edit/ag-grid-vue-hello-world](https://stackblitz.com/edit/ag-grid-vue-hello-world)
26
26
 
27
27
 
28
28
 

15

修正

2021/05/27 03:00

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3にag-grid-vueをcomponentで登録して、レンダリングできなくて困っています。
1
+ Vue.js3でag-grid-vueをレンダリングできなくて困っています。
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3にag-grid-vueをcomponentで登録して、レンダリングできなくて困っています。
1
+ Vue.js3でag-grid-vueをレンダリングできなくて困っています。
2
2
 
3
3
 
4
4
 
@@ -18,51 +18,45 @@
18
18
 
19
19
  コンポーネントにテンプレートまたはレンダリング機能がありませんといっているようです
20
20
 
21
+
22
+
21
- どなたかご教授お願いします。
23
+ 公式サイトの手順は以下になっていますが、
24
+
25
+ https://stackblitz.com/edit/ag-grid-vue-hello-world
22
26
 
23
27
 
24
28
 
25
-
26
-
27
- ```javascirpt
28
-
29
- // 読込方法
30
-
31
- // ag-grid本体
29
+ index.jsとapp.jsにファイルを分けないで、index.jsのみで書きたいです。
32
-
33
- <script src="~/lib/ag-grid/ag-grid-community.js"></script>
34
30
 
35
31
 
36
32
 
37
- // ag-grid-vue(module)
38
-
39
- <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
40
-
41
- ```
42
-
43
-
44
-
45
- ```javascirpt
33
+ どなたかご教授お願いします。
46
-
47
- // Moduleをインポートする方法がうまくできなかったため、constで対応しました。
48
-
49
- // import { AgGridVue } from window["ag-grid-vue"];
50
-
51
- const AgGridVue = window["ag-grid-vue3"];
52
-
53
- const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
54
-
55
- ```
56
34
 
57
35
 
58
36
 
59
37
  ```html
60
38
 
61
- <div id="app">
39
+ <html>
62
40
 
63
- <ag-grid-vue></ag-grid-vue>
41
+ <head>
64
42
 
43
+ <script src="~/lib/ag-grid/ag-grid-community.js"></script>
44
+
45
+ <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
46
+
47
+ </head>
48
+
49
+ <body>
50
+
51
+ <div id="app">
52
+
53
+ <ag-grid-vue></ag-grid-vue>
54
+
65
- </div>
55
+ </div>
56
+
57
+ </body>
58
+
59
+ </html>
66
60
 
67
61
  ```
68
62
 
@@ -71,6 +65,10 @@
71
65
  ```javascirpt
72
66
 
73
67
  // メインコード
68
+
69
+
70
+
71
+ // Moduleをインポートする方法がうまくできなかったため、constで対応しました。
74
72
 
75
73
  const AgGridVue = window["ag-grid-vue3"];
76
74
 

14

修正

2021/05/27 03:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -92,18 +92,6 @@
92
92
 
93
93
  },
94
94
 
95
-
96
-
97
- /* componentのrenderが必要？？
98
-
99
- render: {
100
-
101
-
102
-
103
- },
104
-
105
- */
106
-
107
95
 
108
96
 
109
97
  mounted: function () {
@@ -139,6 +127,18 @@
139
127
  AgGridVue
140
128
 
141
129
  },
130
+
131
+
132
+
133
+ /* renderが必要？？
134
+
135
+ render() {
136
+
137
+
138
+
139
+ },
140
+
141
+ */
142
142
 
143
143
 
144
144
 

13

修正

2021/05/27 02:42

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -92,6 +92,18 @@
92
92
 
93
93
  },
94
94
 
95
+
96
+
97
+ /* componentのrenderが必要？？
98
+
99
+ render: {
100
+
101
+
102
+
103
+ },
104
+
105
+ */
106
+
95
107
 
96
108
 
97
109
  mounted: function () {
@@ -119,18 +131,6 @@
119
131
  }
120
132
 
121
133
  },
122
-
123
-
124
-
125
- /* renderが必要？？
126
-
127
- render: {
128
-
129
-
130
-
131
- },
132
-
133
- */
134
134
 
135
135
 
136
136
 

12

修正

2021/05/27 02:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -132,6 +132,8 @@
132
132
 
133
133
  */
134
134
 
135
+
136
+
135
137
  components: {
136
138
 
137
139
  AgGridVue

11

修正

2021/05/27 02:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -120,7 +120,9 @@
120
120
 
121
121
  },
122
122
 
123
+
123
124
 
125
+ /* renderが必要？？
124
126
 
125
127
  render: {
126
128
 
@@ -128,7 +130,7 @@
128
130
 
129
131
  },
130
132
 
131
-
133
+ */
132
134
 
133
135
  components: {
134
136
 

10

修正

2021/05/27 02:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -16,9 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- コンポーネントにテンプレートまたはレンダリング機能がありませんといっているようですが、html中で<ag-grid-vue>タグで書けるといいのですが。
19
+ コンポーネントにテンプレートまたはレンダリング機能がありませんといっているようです
20
-
21
-
22
20
 
23
21
  どなたかご教授お願いします。
24
22
 

9

修正

2021/05/27 02:32

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Vue.js3にag-grid-vueをcomponentで登録するのに、うまくいかなくて困っています。
1
+ Vue.js3にag-grid-vueをcomponentで登録して、レンダリングできなくて困っています。
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3にag-grid-vueをcomponentで登録するのに、うまくいかなくて困っています。
1
+ Vue.js3にag-grid-vueをcomponentで登録して、レンダリングできなくて困っています。
2
2
 
3
3
 
4
4
 
@@ -62,7 +62,7 @@
62
62
 
63
63
  <div id="app">
64
64
 
65
- <!-- <ag-grid-vue ... ></ag-grid-vue> -->
65
+ <ag-grid-vue></ag-grid-vue>
66
66
 
67
67
  </div>
68
68
 
@@ -72,11 +72,41 @@
72
72
 
73
73
  ```javascirpt
74
74
 
75
+ // メインコード
76
+
75
- const AgGridVue = window["ag-grid-vue"];
77
+ const AgGridVue = window["ag-grid-vue3"];
78
+
79
+ const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
76
80
 
77
81
 
78
82
 
83
+ // export const App = Vue.createApp({
84
+
79
85
  const app = Vue.createApp({
86
+
87
+ data() {
88
+
89
+ return {
90
+
91
+
92
+
93
+ }
94
+
95
+ },
96
+
97
+
98
+
99
+ mounted: function () {
100
+
101
+
102
+
103
+ }
104
+
105
+ });
106
+
107
+
108
+
109
+ app.component("ag-grid-vue", {
80
110
 
81
111
  data() {
82
112
 
@@ -94,9 +124,43 @@
94
124
 
95
125
 
96
126
 
127
+ render: {
128
+
129
+
130
+
131
+ },
132
+
133
+
134
+
97
135
  components: {
98
136
 
99
137
  AgGridVue
138
+
139
+ },
140
+
141
+
142
+
143
+ beforeMount() {
144
+
145
+ this.columnDefs = [
146
+
147
+ { field: 'make' },
148
+
149
+ { field: 'model' },
150
+
151
+ { field: 'price' }
152
+
153
+ ];
154
+
155
+
156
+
157
+ this.rowData = [
158
+
159
+ { make: 'Toyota', model: 'Celica', price: 35000 }
160
+
161
+ ];
162
+
163
+
100
164
 
101
165
  },
102
166
 
@@ -118,7 +182,7 @@
118
182
 
119
183
  `
120
184
 
121
- });
185
+ })
122
186
 
123
187
 
124
188
 

8

修正

2021/05/27 02:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,9 @@
6
6
 
7
7
  // Google Chromeのコンソール表示
8
8
 
9
- vue.global.js:1287 [Vue warn]: Component is missing template or render function.
9
+ [Vue warn]: Component is missing template or render function.
10
10
 
11
- at <AgGridVue style= Object class="ag-theme-alpine" columnDefs=null ... >
11
+ at <AgGridVue style= {width: "500px", height: "300px"} class="ag-theme-alpine" columnDefs= (3) [{…}, {…}, {…}] ... >
12
12
 
13
13
  at <App>
14
14
 

7

修正

2021/05/27 02:24

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  // ag-grid-vue(module)
40
40
 
41
- <script src="~/lib/ag-grid-vue/dist/ag-grid-vue3.umd.js"></script>
41
+ <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
42
42
 
43
43
  ```
44
44
 

6

修正

2021/05/27 02:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  // ag-grid-vue(module)
40
40
 
41
- <script src="~/lib/ag-grid-vue/dist/ag-grid-vue.umd.js"></script>
41
+ <script src="~/lib/ag-grid-vue/dist/ag-grid-vue3.umd.js"></script>
42
42
 
43
43
  ```
44
44
 
@@ -50,7 +50,7 @@
50
50
 
51
51
  // import { AgGridVue } from window["ag-grid-vue"];
52
52
 
53
- const AgGridVue = window["ag-grid-vue"];
53
+ const AgGridVue = window["ag-grid-vue3"];
54
54
 
55
55
  const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
56
56
 

5

修正

2021/05/27 02:23

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -52,6 +52,8 @@
52
52
 
53
53
  const AgGridVue = window["ag-grid-vue"];
54
54
 
55
+ const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
56
+
55
57
  ```
56
58
 
57
59
 
@@ -82,7 +84,9 @@
82
84
 
83
85
  columnDefs: null,
84
86
 
85
- rowData: null
87
+ rowData: null,
88
+
89
+ modules: AgGridAllCommunityModules
86
90
 
87
91
  }
88
92
 

4

修正

2021/05/27 01:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,4 @@
1
1
  Vue.js3にag-grid-vueをcomponentで登録するのに、うまくいかなくて困っています。
2
-
3
- どなたかご教授お願いします。
4
2
 
5
3
 
6
4
 
@@ -15,6 +13,14 @@
15
13
  at <App>
16
14
 
17
15
  ```
16
+
17
+
18
+
19
+ コンポーネントにテンプレートまたはレンダリング機能がありませんといっているようですが、html中で<ag-grid-vue>タグで書けるといいのですが。
20
+
21
+
22
+
23
+ どなたかご教授お願いします。
18
24
 
19
25
 
20
26
 

3

修正

2021/05/27 01:47

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -41,8 +41,6 @@
41
41
  ```javascirpt
42
42
 
43
43
  // Moduleをインポートする方法がうまくできなかったため、constで対応しました。
44
-
45
- // importでやってないのが原因かはわからないです。
46
44
 
47
45
  // import { AgGridVue } from window["ag-grid-vue"];
48
46
 

2

修正

2021/05/27 01:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- Vue.js3にag-grid-vueをcomponentで登録するのに、コンポーネントの登録がうまくいかなくて困っています。
1
+ Vue.js3にag-grid-vueをcomponentで登録するのに、うまくいかなくて困っています。
2
2
 
3
3
  どなたかご教授お願いします。
4
4
 
@@ -8,7 +8,11 @@
8
8
 
9
9
  // Google Chromeのコンソール表示
10
10
 
11
- Failed to resolve component: ag-grid-vue
11
+ vue.global.js:1287 [Vue warn]: Component is missing template or render function.
12
+
13
+ at <AgGridVue style= Object class="ag-theme-alpine" columnDefs=null ... >
14
+
15
+ at <App>
12
16
 
13
17
  ```
14
18
 
@@ -68,11 +72,43 @@
68
72
 
69
73
  const app = Vue.createApp({
70
74
 
75
+ data() {
76
+
77
+ return {
78
+
79
+ columnDefs: null,
80
+
81
+ rowData: null
82
+
83
+ }
84
+
85
+ },
86
+
87
+
88
+
71
89
  components: {
72
90
 
73
91
  AgGridVue
74
92
 
75
- }
93
+ },
94
+
95
+
96
+
97
+ template: `
98
+
99
+ <ag-grid-vue
100
+
101
+ style="width: 500px; height: 300px;"
102
+
103
+ class="ag-theme-alpine"
104
+
105
+ :columnDefs="columnDefs"
106
+
107
+ :rowData="rowData">
108
+
109
+ </ag-grid-vue>
110
+
111
+ `
76
112
 
77
113
  });
78
114
 

1

修正

2021/05/27 01:43

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -37,6 +37,8 @@
37
37
  ```javascirpt
38
38
 
39
39
  // Moduleをインポートする方法がうまくできなかったため、constで対応しました。
40
+
41
+ // importでやってないのが原因かはわからないです。
40
42
 
41
43
  // import { AgGridVue } from window["ag-grid-vue"];
42
44