teratail
回答率
85.46%
質問するログイン新規登録
トップに関する質問Nuxt.jsで内部JSONファイルを読み込みたいがエラーが出る

編集履歴

質問編集履歴

3

最新情報に更新　ファイル構成追加

2020/03/04 13:23

投稿

ttkun
ttkun

スコア30

test CHANGED
File without changes
test CHANGED
@@ -6,9 +6,13 @@
6
6
 
7
7
 
8
8
 
9
+
10
+
9
11
  ほぼ書き方は同じですが
10
12
 
11
- ```store/json.js
13
+ store/json.js
14
+
15
+ ```
12
16
 
13
17
  import jsonData from '~/assets/json/menu.json'
14
18
 
@@ -28,21 +32,21 @@
28
32
 
29
33
  export const getters = {
30
34
 
31
- getAll (state) {
35
+ getAll: (state) => {
32
36
 
33
- return state.json
37
+ // return state.json
34
38
 
35
- },
39
+ return state.data
36
40
 
37
- ...
41
+ }
38
42
 
39
43
  }
40
44
 
41
45
  ```
42
46
 
47
+ componentes/Headers.vue
43
48
 
44
-
45
- ```pages/index.vue
49
+ ```
46
50
 
47
51
  <template>
48
52
 
@@ -58,11 +62,13 @@
58
62
 
59
63
  asyncData ({ store }) {
60
64
 
61
- jsonAll: store.getters['json/getAll']
65
+ // jsonAll: store.getters['json/getAll']
62
66
 
63
- },
67
+ const jsonAll = store.getters['json/getAll']
64
68
 
65
- -----
69
+ return { jsonAll }
70
+
71
+ }
66
72
 
67
73
  }
68
74
 
@@ -73,56 +79,6 @@
73
79
 
74
80
 
75
81
  エラーが表示されます。
76
-
77
- ![イメージ説明](4d5171408b9bb13847b48a9a93c802a9.png)
78
-
79
-
80
-
81
- ```ここに言語を入力
82
-
83
- ERROR [Vue warn]: Property or method "jsonAll" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
84
-
85
-
86
-
87
- found in
88
-
89
-
90
-
91
- ---> <Pages/index.vue> at pages/index.vue
92
-
93
- <Nuxt>
94
-
95
- <VApp>
96
-
97
- <Layouts/default.vue> at layouts/default.vue
98
-
99
- <Root>
100
-
101
- ```
102
-
103
-
104
-
105
- pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
106
-
107
- いずれもすんなり行かず。
108
-
109
-
110
-
111
- 試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。
112
-
113
-
114
-
115
-
116
-
117
- 環境
118
-
119
- Nuxt + Vuetifyを使用しています。
120
-
121
-
122
-
123
- 追記１：
124
-
125
- 2)の方法でためしたところこのようなエラーが表示
126
82
 
127
83
  ![イメージ説明](dc962daf92aa87879956b75d8d22a0e5.png)
128
84
 
@@ -148,29 +104,41 @@
148
104
 
149
105
  ```
150
106
 
151
- ```ここに言語を入力
152
-
153
- [Vue warn]: Property or method "jsonAll" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
107
+ 同じファイルで別の方法を試すも
154
108
 
155
109
 
156
110
 
157
- found in
111
+ ```ここに言語を入力
112
+
113
+ <template>
114
+
115
+ <pre>{{ getAll() }}</pre>
116
+
117
+ </template>
158
118
 
159
119
 
160
120
 
161
- ---> <Headders> at components/Headders.vue
121
+ <script>
162
122
 
163
- <VApp>
123
+ import { mapGetters } from 'vuex'
164
124
 
165
- <Default> at layouts/default.vue
166
125
 
126
+
127
+ export default {
128
+
129
+ methods: {
130
+
131
+ ...mapGetters({ getAll: 'json/getAll' })
132
+
133
+ }
134
+
135
+ }
136
+
167
- <Root>
137
+ </script>
168
138
 
169
139
  ```
170
140
 
171
141
 
172
-
173
- 3)の方法でためしたところこのようなエラーが表示
174
142
 
175
143
  ![イメージ説明](4eb7f78c5d2af894f963284d1bafbb45.png)
176
144
 
@@ -181,3 +149,25 @@
181
149
  unknown getter: json/getAll
182
150
 
183
151
  ```
152
+
153
+
154
+
155
+ pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
156
+
157
+ いずれもすんなり行かず。
158
+
159
+
160
+
161
+ 試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。
162
+
163
+
164
+
165
+
166
+
167
+ 環境
168
+
169
+ Nuxt + Vuetify
170
+
171
+
172
+
173
+ ![イメージ説明](1ada3102e768e886a5a7183e9403439a.png)

2

エラーの追加

2020/03/04 13:23

投稿

ttkun
ttkun

スコア30

test CHANGED
File without changes
test CHANGED
@@ -117,3 +117,67 @@
117
117
  環境
118
118
 
119
119
  Nuxt + Vuetifyを使用しています。
120
+
121
+
122
+
123
+ 追記１：
124
+
125
+ 2)の方法でためしたところこのようなエラーが表示
126
+
127
+ ![イメージ説明](dc962daf92aa87879956b75d8d22a0e5.png)
128
+
129
+
130
+
131
+ ```ここに言語を入力
132
+
133
+ client.js?06a0:43 [Vue warn]: Property or method "jsonAll" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
134
+
135
+
136
+
137
+ found in
138
+
139
+
140
+
141
+ ---> <Headders> at components/Headders.vue
142
+
143
+ <VApp>
144
+
145
+ <Layouts/default.vue> at layouts/default.vue
146
+
147
+ <Root>
148
+
149
+ ```
150
+
151
+ ```ここに言語を入力
152
+
153
+ [Vue warn]: Property or method "jsonAll" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
154
+
155
+
156
+
157
+ found in
158
+
159
+
160
+
161
+ ---> <Headders> at components/Headders.vue
162
+
163
+ <VApp>
164
+
165
+ <Default> at layouts/default.vue
166
+
167
+ <Root>
168
+
169
+ ```
170
+
171
+
172
+
173
+ 3)の方法でためしたところこのようなエラーが表示
174
+
175
+ ![イメージ説明](4eb7f78c5d2af894f963284d1bafbb45.png)
176
+
177
+
178
+
179
+ ```ここに言語を入力
180
+
181
+ unknown getter: json/getAll
182
+
183
+ ```

1

途中でアップしてしまいました。

2020/03/04 12:44

投稿

ttkun
ttkun

スコア30

test CHANGED
File without changes
test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ```store/json.js
12
12
 
13
- import jsonData from '~/assets/json/めぬ.json'
13
+ import jsonData from '~/assets/json/menu.json'
14
14
 
15
15
 
16
16
 
@@ -99,3 +99,21 @@
99
99
  <Root>
100
100
 
101
101
  ```
102
+
103
+
104
+
105
+ pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
106
+
107
+ いずれもすんなり行かず。
108
+
109
+
110
+
111
+ 試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。
112
+
113
+
114
+
115
+
116
+
117
+ 環境
118
+
119
+ Nuxt + Vuetifyを使用しています。