teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Vue.js+OnsenUIのnavigatorの扱うページで値を共有したい

編集履歴

質問編集履歴

3

ソースコード、内容の編集

2018/11/14 14:58

投稿

tyama_jp
tyama_jp

スコア17

test CHANGED
File without changes
test CHANGED
@@ -18,39 +18,21 @@
18
18
 
19
19
 
20
20
 
21
- 基本はPage1を親として、Page2でも、
22
-
23
- Page1の値を扱えたらと考えたのですが、
24
-
25
- OnsenUIのnavigatorの作りでは、App.vueを親としているため、
26
-
27
- App.vueに値を持たせて通信しようと考えました。
21
+ App.vueに作ったtodos配列を、push時に子に渡し、
28
-
29
-
30
-
31
- しかし、App.vueと、Page1は親子ですが、Page1とPage2は親子関係ではないため、
22
+
32
-
33
- Page2で、値の編集を行った場合、
34
-
35
- 一度App.vueに渡してからPage1に戻すという処理になるかと思うのですが、
23
+ 子からは、emitで値を親に渡して、親のコンポーネントで配列の追加を行っております。
36
-
37
- ここの実装がどうしてもわからず、質問させていただきました。
24
+
38
-
39
-
40
-
41
- ※2018/11/14追記
25
+
42
-
43
- 作成しているアプリの内容としては、Page1はTodoリストであり、
26
+
44
-
45
- Todosの配列が登録されています。
27
+ 下記は、そのソースコードとなっております。
46
-
28
+
47
- Page2は新しいTodoを追加する画面が表示されます。そこで情報を追加しボタンを押すと、
29
+ page1、page2それぞれ配列を追加できる形になっておりますが、
48
-
30
+
49
- Page2がpopされ、Page1に戻り、作成されたTodoが追加されている。ということが期待する動作となります。
31
+ 描画の更新が行われません。またこのほかに方法があればご教授願いたいです。
50
-
51
-
52
-
32
+
33
+
34
+
53
- ### 実装したいソースコードのひな形
35
+ ### ソースコード　（試したこと①の内容）
54
36
 
55
37
 
56
38
 
@@ -70,6 +52,8 @@
70
52
 
71
53
  @pop-page="popPage"
72
54
 
55
+ @add-todo="addTodo"
56
+
73
57
  ></v-ons-navigator>
74
58
 
75
59
  </template>
@@ -92,7 +76,27 @@
92
76
 
93
77
  pageStack: [],
94
78
 
79
+ todos: [
80
+
81
+ {
82
+
95
- appValue: "メインです。"
83
+ text: 'todo one',
84
+
85
+ },
86
+
87
+ {
88
+
89
+ text: 'todo two',
90
+
91
+ },
92
+
93
+ {
94
+
95
+ text: 'todo three',
96
+
97
+ }
98
+
99
+ ]
96
100
 
97
101
  }
98
102
 
@@ -102,7 +106,21 @@
102
106
 
103
107
  pushPage(page) {
104
108
 
105
- this.pageStack.push(page)
109
+ this.pageStack.push({
110
+
111
+ extends: page,
112
+
113
+ data : ()=> {
114
+
115
+ return {
116
+
117
+ todos: this.todos
118
+
119
+ }
120
+
121
+ }
122
+
123
+ })
106
124
 
107
125
  },
108
126
 
@@ -110,6 +128,12 @@
110
128
 
111
129
  this.pageStack.pop();
112
130
 
131
+ },
132
+
133
+ addTodo(val) {
134
+
135
+ this.todos.push({text: val})
136
+
113
137
  }
114
138
 
115
139
  },
@@ -140,9 +164,17 @@
140
164
 
141
165
  <custom-toolbar>Page 1</custom-toolbar>
142
166
 
143
- 値={{appValue}}
167
+ <v-ons-list-item v-for="(todo) in todos">
144
-
168
+
145
- <br>
169
+ <label>
170
+
171
+ {{ todo.text }}
172
+
173
+ </label>
174
+
175
+ </v-ons-list-item>
176
+
177
+
146
178
 
147
179
  <ons-button @click="nextPage">
148
180
 
@@ -150,11 +182,9 @@
150
182
 
151
183
  </ons-button>
152
184
 
153
- <br>
154
-
155
185
  <ons-button @click="change">
156
186
 
157
- 値を [page1です] に変更
187
+ todoを追加する
158
188
 
159
189
  </ons-button>
160
190
 
@@ -180,7 +210,7 @@
180
210
 
181
211
  change() {
182
212
 
183
- appValue = "page2です"
213
+ this.$emit('add-todo', 'page1の値です')
184
214
 
185
215
  }
186
216
 
@@ -198,7 +228,7 @@
198
228
 
199
229
  ```vue.js
200
230
 
201
- Page2.vue
231
+ //Page2.vue
202
232
 
203
233
 
204
234
 
@@ -208,21 +238,15 @@
208
238
 
209
239
  <custom-toolbar>Page 2</custom-toolbar>
210
240
 
211
- 値={{appValue}}
212
-
213
- <br>
214
-
215
241
  <ons-button @click="pop">
216
242
 
217
243
  Page1に戻る
218
244
 
219
245
  </ons-button>
220
246
 
221
- <br>
222
-
223
247
  <ons-button @click="change">
224
248
 
225
- 値を [page2です] に変更
249
+ todoを追加する
226
250
 
227
251
  </ons-button>
228
252
 
@@ -234,34 +258,24 @@
234
258
 
235
259
  <script>
236
260
 
237
- import page2 from './Page2'
238
-
239
261
  export default {
240
262
 
263
+ methods: {
264
+
241
- data() {
265
+ pop() {
266
+
242
-
267
+ this.$emit('pop-page')
268
+
269
+ },
270
+
243
- return {
271
+ change() {
272
+
273
+ this.$emit('add-todo', 'page2の値です')
244
274
 
245
275
  }
246
276
 
247
277
  },
248
278
 
249
- methods: {
250
-
251
- pop() {
252
-
253
- this.$emit('pop-page')
254
-
255
- },
256
-
257
- change() {
258
-
259
-
260
-
261
- }
262
-
263
- },
264
-
265
279
  props: ['pageStack']
266
280
 
267
281
  }
@@ -276,7 +290,9 @@
276
290
 
277
291
  ①pushの第二引数でextendを使用し、data型で直接渡す方法を試しました。
278
292
 
279
- 結果：参照で渡せないことと、親に返すだけではPage1とPage2の同期がとれないことが問題となりました。
293
+ 結果：~~参照で渡せないことと、親に返すだけではPage1とPage2の同期がとれないことが問題となりました。~~
294
+
295
+ 追記：子の間でも値を共有していることはconsole.logにて確認できましたが、再描画のみが行われていない状態でした。
280
296
 
281
297
 
282
298
 
@@ -284,6 +300,8 @@
284
300
 
285
301
  取り入れることができませんでした。
286
302
 
303
+ 追記：ons-navigatorでpropsは利用できないとのことでした。代わりのextends。
304
+
287
305
 
288
306
 
289
307
  ③Vue.prototype.$hoge　というグローバルに近いものも試しましたが、思ったように値変更ができないようで断念しました。

2

実際の期待動作記述

2018/11/14 14:58

投稿

tyama_jp
tyama_jp

スコア17

test CHANGED
File without changes
test CHANGED
@@ -38,6 +38,18 @@
38
38
 
39
39
 
40
40
 
41
+ ※2018/11/14追記
42
+
43
+ 作成しているアプリの内容としては、Page1はTodoリストであり、
44
+
45
+ Todosの配列が登録されています。
46
+
47
+ Page2は新しいTodoを追加する画面が表示されます。そこで情報を追加しボタンを押すと、
48
+
49
+ Page2がpopされ、Page1に戻り、作成されたTodoが追加されている。ということが期待する動作となります。
50
+
51
+
52
+
41
53
  ### 実装したいソースコードのひな形
42
54
 
43
55
 

1

初心者マーク

2018/11/14 07:53

投稿

tyama_jp
tyama_jp

スコア17

test CHANGED
File without changes
test CHANGED
File without changes