teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Vueの初歩的な質問になります。

編集履歴

質問編集履歴

4

修正

2021/07/25 07:11

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,25 @@
34
34
 
35
35
  というデータがあった際に、`{{ plan.title.rendered }}` でタイトルが出力されると思うのですが、
36
36
 
37
+ なぜか 下記２つのエラーが出てしまいます。
38
+
39
+
40
+
37
- なぜか `Uncaught TypeError: Cannot read property 'rendered' of undefined` とエラーが出てしまいます。
41
+ `Uncaught TypeError: Cannot read property 'rendered' of undefined`
42
+
43
+
44
+
45
+ ```
46
+
47
+ [Vue warn]: Unhandled error during execution of render function
48
+
49
+ at <Plan>
50
+
51
+ at <Simulation>
52
+
53
+ ```
54
+
55
+ #####
38
56
 
39
57
 
40
58
 

3

修正

2021/07/25 07:11

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -244,34 +244,22 @@
244
244
 
245
245
 
246
246
 
247
- data(){
247
+ created(){
248
-
249
- return {
248
+
250
-
251
- selectPlanData : []
249
+ this.fetchPlan({ id : 805 });
252
-
253
- }
254
250
 
255
251
  },
256
252
 
257
253
 
258
254
 
259
- created(){
255
+ computed : {
260
-
256
+
261
- this.fetchPlan({ id : 805 });
257
+ ...mapGetters([ 'plan' ])
262
258
 
263
259
  },
264
260
 
265
261
 
266
262
 
267
- computed : {
268
-
269
- ...mapGetters([ 'plan' ])
270
-
271
- },
272
-
273
-
274
-
275
263
  methods : {
276
264
 
277
265
  ...mapActions([ 'fetchPlan' ])

2

ソース修正

2021/07/25 06:30

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  ```javascript
70
70
 
71
- // store/index.html
71
+ // store/index.js
72
72
 
73
73
 
74
74
 

1

ソースコード追加

2021/07/25 06:02

投稿

matsuo_basho
matsuo_basho

スコア88

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```
14
14
 
15
- const data = {
15
+ const plan = {
16
16
 
17
17
  "id": 805,
18
18
 
@@ -32,13 +32,13 @@
32
32
 
33
33
 
34
34
 
35
- というデータがあった際に、`{{ data.title.rendered }}` でタイトルが出力されると思うのですが、
35
+ というデータがあった際に、`{{ plan.title.rendered }}` でタイトルが出力されると思うのですが、
36
36
 
37
37
  なぜか `Uncaught TypeError: Cannot read property 'rendered' of undefined` とエラーが出てしまいます。
38
38
 
39
39
 
40
40
 
41
- ちなみに、`{{ data.title }}` では、ちゃんと`"rendered": "タイトルタイトルタイトルタイトル"`と出力されます。
41
+ ちなみに、`{{ plan.title }}` では、ちゃんと`"rendered": "タイトルタイトルタイトルタイトル"`と出力されます。
42
42
 
43
43
 
44
44
 
@@ -61,3 +61,227 @@
61
61
  % vue --version
62
62
 
63
63
  @vue/cli 5.0.0-beta.2
64
+
65
+
66
+
67
+ ### ソースコード
68
+
69
+ ```javascript
70
+
71
+ // store/index.html
72
+
73
+
74
+
75
+ import { createStore } from 'vuex'
76
+
77
+ import axios from 'axios'
78
+
79
+
80
+
81
+ export default createStore({
82
+
83
+
84
+
85
+ state : {
86
+
87
+ plan : ""
88
+
89
+ },
90
+
91
+
92
+
93
+ getters : {
94
+
95
+ plan : (state) => state.plan,
96
+
97
+ },
98
+
99
+
100
+
101
+ mutations : {
102
+
103
+ setPlan : (state, { plan }) => {
104
+
105
+ state.plan = plan
106
+
107
+ }
108
+
109
+ },
110
+
111
+
112
+
113
+ actions : {
114
+
115
+
116
+
117
+ async fetchPlan({ commit }, { id }){
118
+
119
+
120
+
121
+ const url = `https://localhost:8890/wp-json/wp/v2/posts/${id}/`;
122
+
123
+
124
+
125
+ const planRowData = await axios.get(url)
126
+
127
+ const plan = planRowData.data
128
+
129
+
130
+
131
+ if( !plan.id ) throw new Error('Invalid Post.')
132
+
133
+
134
+
135
+ commit('setPlan', { plan })
136
+
137
+
138
+
139
+ }
140
+
141
+
142
+
143
+ }
144
+
145
+
146
+
147
+ })
148
+
149
+ ```
150
+
151
+ ```
152
+
153
+ // App.vue
154
+
155
+
156
+
157
+ <template>
158
+
159
+ <div id="simulation" class="simulation">
160
+
161
+
162
+
163
+ <section>
164
+
165
+
166
+
167
+ <Plan/>
168
+
169
+
170
+
171
+ </section>
172
+
173
+
174
+
175
+ </div>
176
+
177
+ </template>
178
+
179
+
180
+
181
+ <script>
182
+
183
+ import Plan from './components/Plan'
184
+
185
+
186
+
187
+ export default {
188
+
189
+
190
+
191
+ name : 'Simulation',
192
+
193
+
194
+
195
+ components : {
196
+
197
+ Plan
198
+
199
+ }
200
+
201
+
202
+
203
+ }
204
+
205
+ </script>
206
+
207
+ ```
208
+
209
+ ```
210
+
211
+
212
+
213
+ // Plan.vue
214
+
215
+ <template>
216
+
217
+ <div>
218
+
219
+
220
+
221
+ {{ plan.title.rendered }}
222
+
223
+ // Uncaught TypeError: Cannot read property 'rendered' of undefined 発生！
224
+
225
+
226
+
227
+ </div>
228
+
229
+ </template>
230
+
231
+
232
+
233
+ <script>
234
+
235
+ import { mapGetters, mapActions } from "vuex";
236
+
237
+
238
+
239
+ export default {
240
+
241
+
242
+
243
+ name : 'Plan',
244
+
245
+
246
+
247
+ data(){
248
+
249
+ return {
250
+
251
+ selectPlanData : []
252
+
253
+ }
254
+
255
+ },
256
+
257
+
258
+
259
+ created(){
260
+
261
+ this.fetchPlan({ id : 805 });
262
+
263
+ },
264
+
265
+
266
+
267
+ computed : {
268
+
269
+ ...mapGetters([ 'plan' ])
270
+
271
+ },
272
+
273
+
274
+
275
+ methods : {
276
+
277
+ ...mapActions([ 'fetchPlan' ])
278
+
279
+ }
280
+
281
+
282
+
283
+ }
284
+
285
+ </script>
286
+
287
+ ```