質問編集履歴
3
ソースコード、内容の編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,24 +8,15 @@
|
|
|
8
8
|
・Page2.vue （途中でpush、popされるページ）
|
|
9
9
|
の三つです。
|
|
10
10
|
|
|
11
|
-
基本はPage1を親として、Page2でも、
|
|
12
|
-
Page1の値を扱えたらと考えたのですが、
|
|
13
|
-
OnsenUIのnavigatorの作りでは、App.vueを親としているため、
|
|
14
|
-
App.vueに
|
|
11
|
+
App.vueに作ったtodos配列を、push時に子に渡し、
|
|
12
|
+
子からは、emitで値を親に渡して、親のコンポーネントで配列の追加を行っております。
|
|
15
13
|
|
|
16
|
-
しかし、App.vueと、Page1は親子ですが、Page1とPage2は親子関係ではないため、
|
|
17
|
-
|
|
14
|
+
下記は、そのソースコードとなっております。
|
|
18
|
-
|
|
15
|
+
page1、page2それぞれ配列を追加できる形になっておりますが、
|
|
19
|
-
|
|
16
|
+
描画の更新が行われません。またこのほかに方法があればご教授願いたいです。
|
|
20
17
|
|
|
21
|
-
|
|
18
|
+
### ソースコード （試したこと①の内容）
|
|
22
|
-
作成しているアプリの内容としては、Page1はTodoリストであり、
|
|
23
|
-
Todosの配列が登録されています。
|
|
24
|
-
Page2は新しいTodoを追加する画面が表示されます。そこで情報を追加しボタンを押すと、
|
|
25
|
-
Page2がpopされ、Page1に戻り、作成されたTodoが追加されている。ということが期待する動作となります。
|
|
26
19
|
|
|
27
|
-
### 実装したいソースコードのひな形
|
|
28
|
-
|
|
29
20
|
```vue.js
|
|
30
21
|
//App.vue
|
|
31
22
|
|
|
@@ -34,6 +25,7 @@
|
|
|
34
25
|
:page-stack="pageStack"
|
|
35
26
|
@push-page="pushPage"
|
|
36
27
|
@pop-page="popPage"
|
|
28
|
+
@add-todo="addTodo"
|
|
37
29
|
></v-ons-navigator>
|
|
38
30
|
</template>
|
|
39
31
|
|
|
@@ -45,15 +37,35 @@
|
|
|
45
37
|
data() {
|
|
46
38
|
return {
|
|
47
39
|
pageStack: [],
|
|
40
|
+
todos: [
|
|
41
|
+
{
|
|
48
|
-
|
|
42
|
+
text: 'todo one',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
text: 'todo two',
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
text: 'todo three',
|
|
49
|
+
}
|
|
50
|
+
]
|
|
49
51
|
}
|
|
50
52
|
},
|
|
51
53
|
methods: {
|
|
52
54
|
pushPage(page) {
|
|
53
|
-
this.pageStack.push(
|
|
55
|
+
this.pageStack.push({
|
|
56
|
+
extends: page,
|
|
57
|
+
data : ()=> {
|
|
58
|
+
return {
|
|
59
|
+
todos: this.todos
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
})
|
|
54
63
|
},
|
|
55
64
|
popPage() {
|
|
56
65
|
this.pageStack.pop();
|
|
66
|
+
},
|
|
67
|
+
addTodo(val) {
|
|
68
|
+
this.todos.push({text: val})
|
|
57
69
|
}
|
|
58
70
|
},
|
|
59
71
|
created: function(){
|
|
@@ -69,14 +81,17 @@
|
|
|
69
81
|
<template>
|
|
70
82
|
<v-ons-page>
|
|
71
83
|
<custom-toolbar>Page 1</custom-toolbar>
|
|
72
|
-
|
|
84
|
+
<v-ons-list-item v-for="(todo) in todos">
|
|
73
|
-
|
|
85
|
+
<label>
|
|
86
|
+
{{ todo.text }}
|
|
87
|
+
</label>
|
|
88
|
+
</v-ons-list-item>
|
|
89
|
+
|
|
74
90
|
<ons-button @click="nextPage">
|
|
75
91
|
Page2に遷移する
|
|
76
92
|
</ons-button>
|
|
77
|
-
<br>
|
|
78
93
|
<ons-button @click="change">
|
|
79
|
-
|
|
94
|
+
todoを追加する
|
|
80
95
|
</ons-button>
|
|
81
96
|
</v-ons-page>
|
|
82
97
|
</template>
|
|
@@ -89,7 +104,7 @@
|
|
|
89
104
|
this.$emit('push-page', page2)
|
|
90
105
|
},
|
|
91
106
|
change() {
|
|
92
|
-
|
|
107
|
+
this.$emit('add-todo', 'page1の値です')
|
|
93
108
|
}
|
|
94
109
|
},
|
|
95
110
|
props: ['pageStack']
|
|
@@ -98,36 +113,28 @@
|
|
|
98
113
|
```
|
|
99
114
|
|
|
100
115
|
```vue.js
|
|
101
|
-
Page2.vue
|
|
116
|
+
//Page2.vue
|
|
102
117
|
|
|
103
118
|
<template>
|
|
104
119
|
<v-ons-page>
|
|
105
120
|
<custom-toolbar>Page 2</custom-toolbar>
|
|
106
|
-
値={{appValue}}
|
|
107
|
-
<br>
|
|
108
121
|
<ons-button @click="pop">
|
|
109
122
|
Page1に戻る
|
|
110
123
|
</ons-button>
|
|
111
|
-
<br>
|
|
112
124
|
<ons-button @click="change">
|
|
113
|
-
|
|
125
|
+
todoを追加する
|
|
114
126
|
</ons-button>
|
|
115
127
|
</v-ons-page>
|
|
116
128
|
</template>
|
|
117
129
|
|
|
118
130
|
<script>
|
|
119
|
-
import page2 from './Page2'
|
|
120
131
|
export default {
|
|
121
|
-
data() {
|
|
122
|
-
return {
|
|
123
|
-
}
|
|
124
|
-
},
|
|
125
132
|
methods: {
|
|
126
133
|
pop() {
|
|
127
134
|
this.$emit('pop-page')
|
|
128
135
|
},
|
|
129
136
|
change() {
|
|
130
|
-
|
|
137
|
+
this.$emit('add-todo', 'page2の値です')
|
|
131
138
|
}
|
|
132
139
|
},
|
|
133
140
|
props: ['pageStack']
|
|
@@ -137,10 +144,12 @@
|
|
|
137
144
|
|
|
138
145
|
### 試したこと
|
|
139
146
|
①pushの第二引数でextendを使用し、data型で直接渡す方法を試しました。
|
|
140
|
-
結果：参照で渡せないことと、親に返すだけではPage1とPage2の同期がとれないことが問題となりました。
|
|
147
|
+
結果：~~参照で渡せないことと、親に返すだけではPage1とPage2の同期がとれないことが問題となりました。~~
|
|
148
|
+
追記：子の間でも値を共有していることはconsole.logにて確認できましたが、再描画のみが行われていない状態でした。
|
|
141
149
|
|
|
142
150
|
②vueの解説でよくあるpropsで行うやりかたも、ons-navigatorが絡むと形がイメージできず、
|
|
143
151
|
取り入れることができませんでした。
|
|
152
|
+
追記：ons-navigatorでpropsは利用できないとのことでした。代わりのextends。
|
|
144
153
|
|
|
145
154
|
③Vue.prototype.$hoge というグローバルに近いものも試しましたが、思ったように値変更ができないようで断念しました。
|
|
146
155
|
|
2
実際の期待動作記述
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -18,6 +18,12 @@
|
|
|
18
18
|
一度App.vueに渡してからPage1に戻すという処理になるかと思うのですが、
|
|
19
19
|
ここの実装がどうしてもわからず、質問させていただきました。
|
|
20
20
|
|
|
21
|
+
※2018/11/14追記
|
|
22
|
+
作成しているアプリの内容としては、Page1はTodoリストであり、
|
|
23
|
+
Todosの配列が登録されています。
|
|
24
|
+
Page2は新しいTodoを追加する画面が表示されます。そこで情報を追加しボタンを押すと、
|
|
25
|
+
Page2がpopされ、Page1に戻り、作成されたTodoが追加されている。ということが期待する動作となります。
|
|
26
|
+
|
|
21
27
|
### 実装したいソースコードのひな形
|
|
22
28
|
|
|
23
29
|
```vue.js
|
1
初心者マーク
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|