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