vue.js ローカルにあるjsonファイルから取得したデータを表示したい

（例）vue.jsの勉強をしています。
jsファイルで指定したdataをvueファイルのtemplaterタグに指定し
htmlに反映されようとしていますが、反映されず悩んでいます。

発生している問題・エラーメッセージ

エラーメッセージなし

該当のソースコード

js
1import App from './App';
2import axios from 'axios';
3import Vue from 'vue';
4
5new Vue({
6  el: '#app',
7  //template: '<App/>',
8  //components: { App },
9  render: h => h(App),
10    
11  data:{
12    random: null,
13    currentqnotes: {},
14    test111: 'hello'
15  },
16  mounted: function () {
17    axios.get("../data/data.json").then(response => (this.data= response))
18  }
19
20});

vue
1<template>
2  <div id="app"> 
3    <p>{{ data }}</p>
4    <p>Hello world!</p>
5  </div>
6</template>
7
8<script>
9export default {
10  name: 'App',
11};
12</script>
13
14<style scoped>
15p {
16  font-size: 20px;
17}
18</style>

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>example-extension - index</title>
6  <link rel="stylesheet" href="index.css">
7</head>
8<body>
9  <div id="app"></div>
10  <script src="index.js"></script>
11</body>
12</html>

試したこと

templaterタグに直接文字列を入力したらhtmlに反映されること
上述した部分で何か不備がありましたら、ご教授いただけますと幸いです。

補足情報（FW/ツールのバージョンなど）

vue@2.6.10

miyabi_pudding

2019/09/24 01:19

何点か。・data.jsonの中身も掲示されると、より回答がつきやすくなるかと思います。・本当にエラーは何もでていないのでしょうか？ローカルファイルというのは、ローカルファイルをクロスオリジンで扱えるように工夫しないと、通常はCORSエラーが出るものなので・・・。・data: で、dataを定義しているのに、レスポンス内で、this.data = responseと、代入し直しているのも気になります。（Vue.jsの記法でそのような書き方であるなら、問題ない）・HTML内で読み込んでいる、index.jsにて、Vue.jsのコアJSも読み込んでいる、ということでよろしいですか？

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

回答2件

Vueファイルで書いてあるということは、環境はVue CLIでしょうか？
であれば、.jsファイルへの書き込みは不要で、.vueファイルの変更のみで可能かと思います。

やりたいことと一致しているかわかりませんが、下記のようなコードで反映可能と思います。

vue
1<template>
2  <div>
3    {{ hoge.hoge }}  
4  </div>  
5</template>
6
7<script>
8export default {
9  data: function() {
10    return {
11      // jsonファイルは読み込みだけなら変数に直接代入可能です。
12      // ただし、オブジェクトで渡してあげる必要があるようで、パスはrequireで囲む必要があります。
13      hoge: require("@/assets/data/test.json")
14    }
15  }
16}
17</script>

json
1{
2  // keyも"で囲んだほうが良さそうです。
3  "hoge": "hogehoge"
4}

これで、json内の"hoge"の値"hogehoge"が画面に表示されるかと思います。

コメントで入れましたが、ポイントは、JSONは直接変数に代入できることと、ファイルのパスを指定する際にrequireで囲むところですかね。

投稿2021/04/16 06:52

Shoriencohol

総合スコア10

parcel+vueでやってみました

index.html

html
1<html>
2<body>
3  <div id="app"></div>
4  <script src="/parcelvue.e31bb0bc.js"></script>
5</body>
6</html>

index.js

JavaScript
1// import Vue from 'vue/dist/vue.esm.js';
2import Vue from 'vue';
3import App from './App.vue';
4
5new Vue({
6  el: '#app',
7  components: {
8    App,
9  },
10  template: '<app></app>',
11  render: h => h(App),
12});

App.vue

vue
1<template>
2  <div>
3    {{ title }}
4  </div>
5</template>
6
7<style>
8</style>
9
10<script>
11  import axios from 'axios';
12  export default {
13    data() {
14      return({
15        title: '',
16      });
17    },
18    mounted: function() {
19      axios.get('./data.json')
20      .then((response) => {
21        this.title = response.data;
22      });
23    }
24  }
25</script>