質問編集履歴
2
実装の変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
javascript(Nuxt.js)でのツリービューの子要素の展開
|
|
1
|
+
javascript(Nuxt.js)でのツリービューの子要素の展開でsetTimeout以外の選択肢
|
body
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# 発生事象
|
|
2
|
-
ツリービュー展開時の遅延読み込みで
|
|
2
|
+
ツリービュー展開時の遅延読み込みでsetTimeoutを使わないと展開されない
|
|
3
3
|
|
|
4
4
|
# 使用技術
|
|
5
5
|
nuxt.js：2.8.1
|
|
6
6
|
ツリービュー自体：grapecity製のJavaScriptコントロール部品のWijmoを使用（@grapecity/wijmo.vue2.all": "5.20192.624"）
|
|
7
7
|
|
|
8
8
|
# 現状の実装と画像
|
|
9
|
-
以下のようにlazy-load-functionプロパティという展開されたときのプロパティに対し関数(load)を設定しノードが展開されたときにデータを読み込んでいる
|
|
9
|
+
以下のようにlazy-load-functionプロパティという展開されたときのプロパティに対し関数(load)を設定しノードが展開されたときにデータを読み込んでいる。
|
|
10
|
+
コメントアウト部はwatchオプションでデータ取得フラグを監視してツリービューを展開させようとした痕跡だが、callbackが呼べなくて断念。
|
|
10
11
|
```
|
|
11
12
|
<template>
|
|
12
13
|
<div class="container-fluid">
|
|
@@ -25,21 +26,23 @@
|
|
|
25
26
|
//親コンポーネントのloadアクションがデータの取得と、取得したデータをmutationへ飛ばしてstateへ反映する処理をやっている
|
|
26
27
|
await this.$emit('load', node)
|
|
27
28
|
|
|
28
|
-
//
|
|
29
|
+
//問題の箇所（setTimeoutでデータ取得を待ってからcallbackを呼ぶことで展開している
|
|
30
|
+
setTimeout(function() {
|
|
29
|
-
|
|
31
|
+
let result = this.selector
|
|
30
|
-
|
|
32
|
+
callback(result);
|
|
33
|
+
}, 1000);
|
|
31
34
|
|
|
32
35
|
}
|
|
33
36
|
|
|
34
37
|
|
|
35
38
|
//上記のデータ取得処理($emit)の中でデータを取得したら`loadingselectorg`の値を変更してここに飛ばすようにしている
|
|
36
|
-
@Watch('loadingselectorg')
|
|
39
|
+
//@Watch('loadingselectorg')
|
|
37
|
-
loadValueInto(Node, callback) {
|
|
40
|
+
// loadValueInto(Node, callback) {
|
|
38
|
-
if (this.loadingselectorg) {
|
|
41
|
+
// if (this.loadingselectorg) {
|
|
39
|
-
Node = this.selectorg
|
|
42
|
+
// Node = this.selectorg
|
|
40
43
|
//ここでload関数におけるcallback(Node)相当の処理が必要？
|
|
44
|
+
// }
|
|
41
|
-
|
|
45
|
+
// }
|
|
42
|
-
}
|
|
43
46
|
</script>
|
|
44
47
|
```
|
|
45
48
|
|
1
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -51,10 +51,10 @@
|
|
|
51
51
|
async load() {
|
|
52
52
|
alert('containerからloadをdispachします')
|
|
53
53
|
this.loadingselectorg = false
|
|
54
|
-
await this.$store.dispatch('
|
|
54
|
+
await this.$store.dispatch('/アクション', 現在のノード情報).catch(() => {
|
|
55
55
|
this.$notify({
|
|
56
56
|
title: '失敗',
|
|
57
|
-
message: '
|
|
57
|
+
message: '情報を取得できませんでした',
|
|
58
58
|
type: 'warning'
|
|
59
59
|
})
|
|
60
60
|
})
|