Vue.jsによるローカルファイルの読み込みについて

前提・実現したいこと

Vue.jsを使ってローカルのJSONファイルを読み込んでその内容を表示したいです。
下記のような実装で表示はできたのですが prefecture タグの数だけファイルを読み込むのでこの読み込みを一度だけに
したいのですがなにかいい方法はないでしょうか？

prefecture タグの上になにか親コンポーネントをつくって渡せないかと思ったのですが画面によって prefecture タグの数が
異なるのでいまいち親コンポーネントの作り方がわからず...

vueあまりさわったことないので、このサイトとか参考になるとかあれば教えていただければ幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1">
6		<title>test</title>
7	</head>
8	<body>
9    <div id="app">
10      <prefecture pre_id="0001"></prefecture>
11      <prefecture pre_id="0002"></prefecture>
12      <prefecture pre_id="0003"></prefecture>
13    </div>
14    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15    <script src="index.js"></script>
16  </body>
17</html>

javascript
1function readJSON(path, callback) {
2  var xhr = null; // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
3  try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = new XMLHttpRequest(); }
4  xhr.open("GET", path, true);
5  xhr.onreadystatechange = function(){
6    if(xhr.readyState === 4) {
7        var data = xhr.responseText; // 外部ファイルの内容
8        var json = JSON.parse(data);
9        callback(json);
10    }
11  };
12  xhr.send();
13}
14
15Vue.component('prefecture', {
16  props: ['pre_id'],
17  template: '<div><p>{{ pre_id }}</p><p>{{ name }}</p><p>{{ city }}</p></div>',
18  data:  ()=> {
19    return {
20      name: "",
21      city: ""
22    }
23  },
24  mounted: function () {
25    var self = this;
26    readJSON("index.json", function(json){
27      var target = json.filter(x => x.pre_id === self.pre_id)[0];
28      self.name = target.name;
29      self.city = target.city;
30    })
31  }
32})
33
34var app = new Vue({
35  el: '#app',
36  data: {
37
38  }
39})

json
1[
2  {
3    "pre_id": "0001",
4    "name": "滋賀県",
5    "city": "大津市"
6  },
7  {
8    "pre_id": "0002",
9    "name": "京都府",
10    "city": "京都市"
11  },
12  {
13    "pre_id": "0003",
14    "name": "大阪府",
15    "city": "大阪市"
16  },
17  {
18    "pre_id": "0004",
19    "name": "兵庫県",
20    "city": "神戸市"
21  },
22  {
23    "pre_id": "0005",
24    "name": "奈良県",
25    "city": "奈良市"
26  },
27  {
28    "pre_id": "0006",
29    "name": "和歌山県",
30    "city": "和歌山市"
31  }
32]

行動規範の内容に同意します

回答2件

prefectureコンポーネントを複数記述するのではなく、

jsonファイル全体を読み込む
↓
v-forディレクティブでjsonのデータをループで回す
↓
必要なデータのみfilterByでフィルタリングして表示

という流れが良いのでは無いかと思います。

import json from './index.json'

<li v-for="item in json | filterBy searchId in 'pre_id'">
   {{ item.name }}
</li>

私も学習中のためざっくりした回答で申し訳ないです。
下記のページが参考になると思います。

リストレンダリング
https://jp.vuejs.org/v2/guide/list.html

v-forとv-ifでリストレンダリング制御したいと思っていた俺がアホだった。
https://qiita.com/shinichi-takahashi/items/e0b6728bb4c6b693b85b

Vue.js で json を読み込む
https://qiita.com/Hiroyuki1993/items/56e4b0c15786bf8d787b

投稿2020/03/14 08:11

編集2020/03/14 08:16

tomopoly6

総合スコア10

usagi001

2020/03/15 04:37

回答ありがとうございます。 filterByが使えなかったので（2.x系だから？）親にjson読み込みとmethodsにfilter追加して下記のように書くととりあえず0001だけ表示されました。（ほか２つは表示されず...）まだVue.js全然理解できてない感じがするので勉強し直します！ <div id="app"> <prefecture v-for="item in filter(items, '0001')" :key="item.pre_id" :item="item"/> <prefecture v-for="item in filter(items, '0002')" :key="item.pre_id" :item="item"/> <prefecture v-for="item in filter(items, '0003')" :key="item.pre_id" :item="item"/> </div>

行動規範の内容に同意します

自己解決

思ってたのと違いますが下記2パターンでやりたいことはできました！
１．親methodsで設定する

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>test</title>
7  </head>
8  <body>
9    <div id="app">
10      <prefecture :item="findItem('0001')"></prefecture>
11      <prefecture :item="findItem('0002')"></prefecture>
12      <prefecture :item="findItem('0003')"></prefecture>
13    </div>
14    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15    <script src="index.js"></script>
16  </body>
17</html>

js
1function readJSON(path, callback) {
2  var xhr = null; // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
3  try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = new XMLHttpRequest(); }
4  xhr.open("GET", path, true);
5  xhr.onreadystatechange = function(){
6    if(xhr.readyState === 4) {
7        var data = xhr.responseText; // 外部ファイルの内容
8        var json = JSON.parse(data);
9        callback(json);
10    }
11  };
12  xhr.send();
13}
14
15window.onload = function() {
16  readJSON("index.json", function(json){
17    var app = new Vue({
18      el: '#app',
19      data: {
20        items: json
21      },
22      methods: {
23        findItem: function (id) {
24          var filters = this.items.filter(function (x) {
25            return x.pre_id === id
26          })
27          return filters[0];
28        }
29      }
30    })
31  })
32}
33
34Vue.component('prefecture', {
35  template: '<div><p>{{ item.pre_id }}</p><p>{{ item.name }}</p><p>{{ item.city }}</p></div>',
36  props: ['item']
37})

２. 子から$parentで親から取得する

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>test</title>
7  </head>
8  <body>
9    <div id="app">
10      <prefecture pre_id="0001"></prefecture>
11      <prefecture pre_id="0002"></prefecture>
12      <prefecture pre_id="0003"></prefecture>
13    </div>
14    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
15    <script src="index.js"></script>
16  </body>
17</html>

js
1function readJSON(path, callback) {
2  var xhr = null; // 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
3  try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = new XMLHttpRequest(); }
4  xhr.open("GET", path, true);
5  xhr.onreadystatechange = function(){
6    if(xhr.readyState === 4) {
7        var data = xhr.responseText; // 外部ファイルの内容
8        var json = JSON.parse(data);
9        callback(json);
10    }
11  };
12  xhr.send();
13}
14
15window.onload = function() {
16  readJSON("index.json", function(json){
17    var app = new Vue({
18      el: '#app',
19      data: {
20        items: json
21      }
22    })
23  })
24}
25
26Vue.component('prefecture', {
27  template: '<div><p>{{ item.pre_id }}</p><p>{{ item.name }}</p><p>{{ item.city }}</p></div>',
28  props: ['pre_id'],
29  data: function() {
30    var id = this.pre_id;
31    var filters = this.$parent.items.filter(function (x) {
32      return x.pre_id === id
33    })
34    return {
35      item: filters[0]
36    }
37  }
38})
39