【Vue.js】template内でのjsonデータの表示の仕組みが分からない

Ruby on Rails 6とVue.jsの学習中の初学者です。
最終的に問題自体は解決しましたが仕組みについて分からない点があったので質問させていただきます。

前提

railsのコントローラーでDB内のレコードをjson形式で取得したあと、
以下のコードでその値の先頭のハッシュのみを取り出しtemplate内で描画しようとしています。

vue
1<template>
2<div id="app">
3  <p>{{ renderResult }}</p>
4</div>
5</template>
6
7<script>
8  import axios from 'axios';
9  import OrganizationChart from 'vue-organization-chart'
10  import 'vue-organization-chart/dist/orgchart1.css'
11
12
13  export default {
14    components: {
15      OrganizationChart
16    },
17    data () {
18      return {
19        ds: [],
20      }
21    },
22    computed: {
23      renderResult: function () {
24
25        let result = {};
26        result["id"]    = this.ds[0]["id"];     
27        result["title"] = this.ds[0]["content"];                     
28
29        return result;
30      }
31    },
32    mounted () {
33      axios
34        .get(`/api/v1/posts/${this.$route.params.id}.json`)
35        .then(response => (this.ds = response.data))
36    }
37  }
38</script>
39
40
41<style scoped>
42</style>
43

json
1[
2 {"id":1,"content":"C言語"},
3 {"id":2,"content":"Java"}
4]
5

上記のVueファイルではtemplate内でrenderResultの結果を表示できませんでした。
色々試したところ以下のように修正すると表示できました。
(修正してない箇所は省略しています。)

成功したコード

data ()内に値を追加

結果:{"id":1,"content":"C言語"}が表示される

Vue
1(省略)
2    data () {
3      return {
4        ds: [　　　　　　　　　　　　　　　
5          {"id":1,"content":"COBOL"},　　　//ハッシュを追加
6          {"id":2,"content":"Python"}
7        ],
8      }
9    },
10    computed: {
11      renderResult: function () {
12
13        let result = {};
14        result["id"]    = this.ds[0]["id"];     
15        result["title"] = this.ds[0]["content"];                     
16
17        return result;
18      }
19    },
20    mounted () {
21      axios
22        .get(`/api/v1/posts/${this.$route.params.id}.json`)
23        .then(response => (this.ds = response.data))
24    }
25  }
26</script>
27(省略)
28

2.ハッシュを追加した上でmounted ()を削除
結果:[{"id":1,"content":"COBOL"},{"id":2,"content":"Python"}]が表示される

Vue
1(省略)
2    data () {
3      return {
4        ds: [　　　　　　　　　　　　　　　
5          {"id":1,"content":"COBOL"},　　　//ハッシュを追加
6          {"id":2,"content":"Python"}
7        ],
8      }
9    },
10    computed: {
11      renderResult: function () {
12
13        let result = {};
14        result["id"]    = this.ds[0]["id"];     
15        result["title"] = this.ds[0]["content"];                     
16
17        return result;
18      }
19    }　　　　　　　　　　　　　　　　　　　　　//mounted削除
20</script>
21
22
23<style scoped>
24</style>

また、data ()内のハッシュを一つにすると何も表示されませんでした。
どのような仕組みで上記のようなことが起こってるのが分かっていない状態です。
初歩的な質問でしたら大変恐縮ですが、わかる方おられましたらご教授いただけると幸いです。

dameo

2020/08/13 01:56

最初のコードで表示されないのは、gogoweb_ikedaさんがおっしゃる通りの理由。コンソール表示を見てくれればエラーが出てるのが分かります。 2番めのコードは表示されるのは、初期データがdataメンバで指定されてるから、初回表示でcomputedを計算するときに、this.data[0]が存在するため一瞬2個表示されるが、ajax後に1個になる。 3番めのコードは2番目同様に初回表示で2個表示され、そのままになる。最後のdata ()内のハッシュを一つにする、はコードがないので分かりませんが、どこかミスってるだけだと思います。確認用コードは↓。今回の要件に関係ないコードは変えてます。 <div id="app"> <p>{{ renderResult }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data() { return { ds: [{ "id": 1, "content": "C言語" }] } }, computed: { renderResult: function () { let result = {}; result["id"] = this.ds[0]["id"]; result["title"] = this.ds[0]["content"]; return result; } }, }); </script>

退会済みユーザー

2020/08/14 13:47 編集

ありがとうございます。確認してみます！

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

回答1件

computedがmountedより先にトリガーするため、最初のcomputedの読み込み時点でthis.ds[0]["id"]が存在しないのでエラー、もしくは空になるのだと思います。
公式ドキュメントのライフサイクルからcomputedのタイミングが見つけられませんでしたが、
こちらのサイトによるとbeforeMountとmountedの間らしいのでbeforeMountで試してみてはどうでしょうか？

投稿2020/08/12 07:07