Help us understand the problem. What is going on with this article?

Vue.jsで猫検索アプリ作成

Index

1.VueCLIでHelloWorld
2.Vue.jsでフォームを使おう
3.Vue.jsで単一ファイルコンポーネント
4.Vue.jsでAPI通信
5.Vue.jsで猫検索アプリ作成
6.おまけ


0. 事前準備

ソース・ファイルのチェックアウト
https://github.com/MariMurotani/my-project.git
ブランチを07_materialize_integrationに切り替えます。

1. Materialize CSSのとJqueryインテグレーション

今回はCDNを使って、html内に直接ロードします。

index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

2.画像表示用の単一ファイルコンポーネント作成

2.1 データの設定

まずは、jsonデータをexport defaultのdata()内に設定します。

  data () {
    return {
      items: [
        {title: '猫1', comment: 'すき', image: '/static/images1.jpeg', like: true},
        {title: '猫2', comment: 'ラブ', image: '/static/images2.jpeg', like: false},
        {title: '猫2', comment: 'ラブ', image: '/static/images3.jpeg', like: true},
        {title: '猫1', comment: 'すき', image: '/static/images4.jpeg', like: false},
        {title: '猫2', comment: 'ラブ', image: '/static/images5.jpeg', like: false},
        {title: '猫2', comment: 'ラブ', image: '/static/images6.jpeg', like: false}
      ]
    }
  }

2.2 v-for構文を使ってitemsをループで回しましょう。

v-forの中で,先程設定したitem,indexが参照できるようになります。

<div class="float_image" v-for="(item, index) in items">
........
</div>

2.3 v-bindを使ってclassの出し分けをします。

item.likeがtrueのときは、class="heart",item.likeがfalseのときは、class="heart_disable"になります。
v-n:clickをつかってクリックイベントにlikeメソッドを指定しましょう。

<div :class="{ heart: item.like , heart_disable: !item.like }" v-on:click="like(index, $event)"></div>

2.4 likeイベントの実装

methodsの中に、likeメソッドを作成しましょう。
this.items[index].like = !this.items[index].like
でデータのON/OFFを切り替えます。
データ更新を受取り、domが再描画され、ハートの色が灰色←→ピンクに変わっていきます。

 methods: {
    like: function (index, event) {
      this.items[index].like = !this.items[index].like
      this.send(index, this.items[index].like)
    },
    send: function (index, boolean) {
      //  send ajax request to add like!
    }
  }

3. Scene2に2で作成したコンポーネントを追加する

src/components/Scene2.vue
<image-panel-container class="image_panel"></image-panel-container>

output_CQpfok.gif

MariMurotani
フルスタックエンジニアとして17年働いています。Qiitaはメモ用にはじめました。 最近はRailsとフロントとAWS少しとCI少し。 ガラケーからスマフォに移行した全盛期をフルスタックエンジニアとして自社サービス開発をしながら過ごし、その後ブリッジSEやPM業をしながらシステム開発分野・ウェブサービス事業などで働いています。最近は少しゆっくりRailsを中心に勉強中。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away