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

編集履歴

質問編集履歴

3

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

2020/03/04 13:23

投稿

ttkun
ttkun

スコア30

title CHANGED
File without changes
body CHANGED
@@ -2,8 +2,10 @@
2
2
 
3
3
  [Nuxt.js(v2)で静的なJSONファイルを読み込み、いろんな所で使う。](https://qiita.com/amishiro/items/b09f9038ee3ebfee33d4)
4
4
 
5
+
5
6
  ほぼ書き方は同じですが
6
- ```store/json.js
7
+ store/json.js
8
+ ```
7
9
  import jsonData from '~/assets/json/menu.json'
8
10
 
9
11
  // 状態管理
@@ -13,14 +15,14 @@
13
15
 
14
16
  // getters
15
17
  export const getters = {
16
- getAll (state) {
18
+ getAll: (state) => {
19
+ // return state.json
17
- return state.json
20
+ return state.data
18
- },
21
+ }
19
- ...
20
22
  }
21
23
  ```
22
-
23
- ```pages/index.vue
24
+ componentes/Headers.vue
25
+ ```
24
26
  <template>
25
27
  <pre>{{ jsonAll }}</pre>
26
28
  </template>
@@ -28,39 +30,15 @@
28
30
  <script>
29
31
  export default {
30
32
  asyncData ({ store }) {
33
+ // jsonAll: store.getters['json/getAll']
31
- jsonAll: store.getters['json/getAll']
34
+ const jsonAll = store.getters['json/getAll']
35
+ return { jsonAll }
32
- },
36
+ }
33
- -----
34
37
  }
35
38
  </script>
36
39
  ```
37
40
 
38
41
  エラーが表示されます。
39
- ![イメージ説明](4d5171408b9bb13847b48a9a93c802a9.png)
40
-
41
- ```ここに言語を入力
42
- 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.
43
-
44
- found in
45
-
46
- ---> <Pages/index.vue> at pages/index.vue
47
- <Nuxt>
48
- <VApp>
49
- <Layouts/default.vue> at layouts/default.vue
50
- <Root>
51
- ```
52
-
53
- pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
54
- いずれもすんなり行かず。
55
-
56
- 試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。
57
-
58
-
59
- 環境
60
- Nuxt + Vuetifyを使用しています。
61
-
62
- 追記１：
63
- 2)の方法でためしたところこのようなエラーが表示
64
42
  ![イメージ説明](dc962daf92aa87879956b75d8d22a0e5.png)
65
43
 
66
44
  ```ここに言語を入力
@@ -73,20 +51,37 @@
73
51
  <Layouts/default.vue> at layouts/default.vue
74
52
  <Root>
75
53
  ```
54
+ 同じファイルで別の方法を試すも
55
+
76
56
  ```ここに言語を入力
77
- [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.
57
+ <template>
58
+ <pre>{{ getAll() }}</pre>
59
+ </template>
78
60
 
79
- found in
61
+ <script>
62
+ import { mapGetters } from 'vuex'
80
63
 
64
+ export default {
65
+ methods: {
81
- ---> <Headders> at components/Headders.vue
66
+ ...mapGetters({ getAll: 'json/getAll' })
67
+ }
68
+ }
82
- <VApp>
69
+ </script>
83
- <Default> at layouts/default.vue
84
- <Root>
85
70
  ```
86
71
 
87
- 3)の方法でためしたところこのようなエラーが表示
88
72
  ![イメージ説明](4eb7f78c5d2af894f963284d1bafbb45.png)
89
73
 
90
74
  ```ここに言語を入力
91
75
  unknown getter: json/getAll
92
- ```
76
+ ```
77
+
78
+ pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
79
+ いずれもすんなり行かず。
80
+
81
+ 試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。
82
+
83
+
84
+ 環境
85
+ Nuxt + Vuetify
86
+
87
+ ![イメージ説明](1ada3102e768e886a5a7183e9403439a.png)

2

エラーの追加

2020/03/04 13:23

投稿

ttkun
ttkun

スコア30

title CHANGED
File without changes
body CHANGED
@@ -57,4 +57,36 @@
57
57
 
58
58
 
59
59
  環境
60
- Nuxt + Vuetifyを使用しています。
60
+ Nuxt + Vuetifyを使用しています。
61
+
62
+ 追記１：
63
+ 2)の方法でためしたところこのようなエラーが表示
64
+ ![イメージ説明](dc962daf92aa87879956b75d8d22a0e5.png)
65
+
66
+ ```ここに言語を入力
67
+ 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.
68
+
69
+ found in
70
+
71
+ ---> <Headders> at components/Headders.vue
72
+ <VApp>
73
+ <Layouts/default.vue> at layouts/default.vue
74
+ <Root>
75
+ ```
76
+ ```ここに言語を入力
77
+ [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.
78
+
79
+ found in
80
+
81
+ ---> <Headders> at components/Headders.vue
82
+ <VApp>
83
+ <Default> at layouts/default.vue
84
+ <Root>
85
+ ```
86
+
87
+ 3)の方法でためしたところこのようなエラーが表示
88
+ ![イメージ説明](4eb7f78c5d2af894f963284d1bafbb45.png)
89
+
90
+ ```ここに言語を入力
91
+ unknown getter: json/getAll
92
+ ```

1

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

2020/03/04 12:44

投稿

ttkun
ttkun

スコア30

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ほぼ書き方は同じですが
6
6
  ```store/json.js
7
- import jsonData from '~/assets/json/めぬ.json'
7
+ import jsonData from '~/assets/json/menu.json'
8
8
 
9
9
  // 状態管理
10
10
  export const state = () => ({
@@ -48,4 +48,13 @@
48
48
  <VApp>
49
49
  <Layouts/default.vue> at layouts/default.vue
50
50
  <Root>
51
- ```
51
+ ```
52
+
53
+ pages/index.vueにdataとして保存するやりかたなどが必要なのでしょうか？
54
+ いずれもすんなり行かず。
55
+
56
+ 試してみたほうがいい方法や、他に必要な情報等がありましたが追記しましすのでご回答よろしくお願いします。
57
+
58
+
59
+ 環境
60
+ Nuxt + Vuetifyを使用しています。