#50 Vue.js + Railsアプリ開発アウトプット

2021年5月24日 19:08

こんばんは！hiroです😃
アウトプット前の「今日は何の日？」シリーズ、今日は "ゴルフ場記念日" になります！1903年（明治36年）のこの日、日本初のゴルフ場 "神戸ゴルフ倶楽部" がオープンしました。このゴルフ場を造ったのは、六甲山山頂に住んでいたイギリス人貿易商の "アーサー・ヘスケス・グルーム氏" （Arthur Hesketh Groom、1846～1918年）。開場当時、六甲山には外国人の別荘が建ち並んでいて、彼らのレジャーと社交の場としての利用が造成の目的であった。そのため、外国人専用のもので日本人は利用できなかったみたいです🙃
全世界に存在するゴルフ場は "32,471（個人的には少なく感じました）" 、第1位はアメリカの14,640、日本は第3位で2,227との事です！

それでは、本日もアウトプットします😇

Vuetify（雛形の要素を繰り返し表示させるための実装）

■pbulic/index.html
〜省略〜
<script>
  new Vue ({
    el: '#app',
    data () {
      return {
        snippetList: ['',''],　①
      }
    },
    mounted () {
    },
    methods: {
    }
  )}
</script>
〜省略〜

・① 変数 "snippetList" に配列を定義。シングルクォーテーションを記述。

■pbulic/index.html
<body>
  <v-app id="app">
  〜省略〜
    <v-card style="margin-top:10px" v-for="snippet in snippetList"> 　②
      <v-card-title primary-title>
        <h3 class="headline">Snippet Title</h3>
      </v-card-title>
      <div style='margin: 10px 20px;'>
        <textarea style='width:100%; height:300px; background-color:#efefef; padding:3px'> hoge </textarea>
      </div>
    </v-card>
  </v-app>
 〜省略〜
</body>

・② "v-for="新たな変数名 in data() で定義した配列" " は data()で定義した配列の各要素を要素の数分だけ新たな変数 snippet に代入し、v-card 内で扱えるように記述する。

上記記述で出来た内容はこちら
https://gyazo.com/340f9fe4b4c63169e64fa5511aa5cdb1

本日も最後まで読んで頂き、ありがとうございました！

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材TechPit　
Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！

この記事が気に入ったらサポートをしてみませんか？