質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.75%

  • Vue.js

    571questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vue.jsのcardが表示されない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 73

naoya0206k1

score 4

CodePenにあるTinderライクなSwipe機能を、自分用に編集したいと思ってコードをコピペ後いじっています。
どこの箇所でひっかかているのでしょうか。これぞ!といったErrorが出なくて困っています。ご教授頂けると大変有難いです。
宜しくお願い致します。

 環境

  • Vue.js 2.4.2
  • Django 2.0.5

 前提

vue.js初めて触っています。というかJs自体Progateで一通りやったレベルです。

 問題点

 <card ---> の部分が出力されない。

 コード

>参照しているCodePen
https://codepen.io/Flamov/pen/NwpzZO?editors=0010

>swipe.js

var card = Vue.component('card', {
    props: {
        current: {
            type: Boolean,
            required: true
        },

        approved: {
            type: Boolean
        }
    },
    template: `
         <div v-if="showing" class="card offset-1 col-10"
            v-bind:class="{ animated: animating, current: current }"
            v-bind:style="{ transform: returnTransformString }">

            <!--Home画像設定されなければdefault.pngが表示-->
            {% load static %} 
            <img class="card-img-top image" src="{% static "goen/images/home-img.png" %}" onerror="if (this.src != '/../static/goen/images/default.png') this.src = '/../static/goen/images/default.png';" alt="home-img" >


            <div class="card-block center">
                  <h3 class="name">{{ group_friend.username }}</h3>
                  <p>Put some tags here.</p>
            </div>


            <img class="rounded-circle img-full" src={{ group_friend.picture_url }} width="300">
        </div>
    `,
    data: function() {
        return {
            showing: true,
            //maxStars: 5,
            animating: true, // Controls CSS class with transition declaration
            threshold: window.innerWidth / 3, // Breakpoint distance to approve/reject a card
            maxRotation: 20, // Max rotation value in degrees
            position: {
                x: 0,
                y: 0,
                rotation: 0
            },
            /*
            icon: {
                opacity: 0,
                type: null
            }
            */
        };
    },
    computed: {
        returnTransformString: function() {

            if (this.animating === false || this.approved !== null) {
                const x = this.position.x;
                const y = this.position.y;
                const rotate = this.position.rotation;
                return 'translate3D(' + x + 'px, ' + y + 'px, 0) rotate(' + rotate + 'deg)';
            }
            else {
                return null;
            }

        }
    },
    mounted: function() {

        const element = this.$el;
        const self = this;

        interact(element).draggable({
            inertia: false,
            onstart: function() {

                /*
                    Disable CSS transitions during dragging.
                */

                self.animating = false;

            },
            onmove: function(event) {

                /*
                    Calculate new x and y coordinate values from the local value and
                    the event object value. Also adjust element rotation transformation
                    based on proximity to approve/reject threshold.
                */

                const x = (self.position.x || 0) + event.dx;
                const y = (self.position.y || 0) + event.dy;

                let rotate = self.maxRotation * (x / self.threshold);

                if (rotate > self.maxRotation) {
                    rotate = self.maxRotation;
                }
                else if (rotate < -self.maxRotation) {
                    rotate = -self.maxRotation;
                }

                self.position.x = x;
                self.position.y = y;
                self.position.rotation = rotate;

                /*
                    Change icon image type based on drag direction and adjust opacity
                    from 0-1 based on current rotation amount. Also emit an event to
                    show/hide respective button below cards during dragging.
                */

                if (rotate > 0) {
                    self.icon.type = 'approve';
                }
                else if (rotate < 0) {
                    self.icon.type = 'reject';
                }

                const opacityAmount = Math.abs(rotate) / self.maxRotation;

                self.icon.opacity = opacityAmount;
                self.$emit('draggedActive', self.icon.type, opacityAmount);

            },
            onend: function(event) {

                /*
                    Check if card has passed the approve/reject threshold and emit approval
                    value change event, otherwise reset card and icon to default values.
                */

                self.animating = true;

                if (self.position.x > self.threshold) {
                    self.$emit('draggedThreshold', true);
                    self.icon.opacity = 1;
                }
                else if (self.position.x < -self.threshold) {
                    self.$emit('draggedThreshold', false);
                    self.icon.opacity = 1;
                }
                else {
                    self.position.x = 0;
                    self.position.y = 0;
                    self.position.rotation = 0;
                    self.icon.opacity = 0;
                }

                self.$emit('draggedEnded');

            }

        });

    },
    watch: {
        approved: function() {

            if (this.approved !== null) {

                const self = this;

                // Remove interact listener to prevent further dragging
                interact(this.$el).unset();
                this.animating = true;

                /*
                    Move card off-screen in direction of approve/reject status,
                    then remove it from the DOM, thereby adjusting the CSS
                    nth-child selectors.
                */

                const x = window.innerWidth + (window.innerWidth / 2) + this.$el.offsetWidth;

                if (this.approved === true) {
                    this.position.x = x;
                    this.position.rotation = this.maxRotation;
                    this.icon.type = 'approve';
                }
                else if (this.approved === false) {
                    this.position.x = -x;
                    this.position.rotation = -this.maxRotation;
                    this.icon.type = 'reject';
                }

                this.icon.opacity = 1;

                setTimeout(function() {
                    self.showing = false;
                }, 200);

            }

        }
    }
});





var app = new Vue({
    el: '#app',
    template: `
        <div id="app">
            <div class="card-container">
                <card v-for="(card, index) in cards.data" :key="index"
                    v-bind:current="index === cards.index"
                    v-bind:approved="card.approved"
                    v-on:draggedThreshold="setApproval">
                </card>
            </div>

        </div>
    `,
    data: {
        //isLoading: true, // Toggles the loading overlay
        cards: {
            data: null, // Array for card data
            index: 0, // Current index in the cards.data array
            max: 10 // Max cards to show in each stack
        }
    },
    methods: {
          getData: function() {

            /*
            //this.isLoading = true;
            this.cards.data = null;
            const self = this;
            */


            // Get a random list of people
            const request = new XMLHttpRequest();
            request.open('GET', '{{ group_friend.picture_url }}', true);

            request.onload = function() {

                const response = JSON.parse(request.responseText).results;

                const data = response.map(function(object) {



                        //Construct a new array with objects containing only
                        //the relevent data from the original response data



                    return {
                        //name: object.name.first + ' ' + object.name.last,
                        //picture: object.picture.large,
                        //rating: Math.floor(Math.random() * 5 + 1),
                        approved: null
                    };

                });

                // Fake delay for purposes of demonstration
                setTimeout(function() {
                    self.cards.data = data;
                    self.cards.index = 0;
                    //self.isLoading = false;    
                }, 500);

            };

            request.send();

        },

        setApproval: function(approval) {

            /*
                Change approval value for current card, and request new data
                if at the end of the card array
            */

            this.cards.data[this.cards.index].approved = approval;
            this.cards.index++;

            if (this.cards.index >= this.cards.data.length) {
                this.getData();
            }

        }

    },
    mounted: function() {

        this.getData();

    }
});

>group.html

{% extends 'base.html' %}

{% block main %}
    <div id="app"></div>

{% endblock %}

表示されているhtml

<div id="app">
  <div class="card-container"></div>
</div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • rubytomato

    2018/08/11 18:37

    swipe.jsのgetDataという関数内で外部APIを呼んでいるとおもいますが、そのレスポンスをreturnしてる箇所のコードです。あと、swipe.jsの中でいくつかコメントアウトしている行がありますが、これは実行時にエラーになったからコメントアウトしたということでしょうか?

    キャンセル

  • naoya0206k1

    2018/08/11 21:33

    > "return { approved: null };" 理解しました。ありがとうございます。

    キャンセル

  • naoya0206k1

    2018/08/11 21:37

    >コメントアウト エラーになったからではなく、name, picture, rating, isLoading の部分は今回は不要だったのでコメントアウトしました。`this.cards.data = null; const self = this;`この部分は消さない方がよかったですね..今気づきました...

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    teratail3周年おめでとうございます

    alert("teratail3周年おめでとうございます"); みなさんの得意な言語での祝福のメッセージの出力方法を教えてください。

  • 解決済

    サーバサイドから取得したjsonが画面に反映されない

    前提・実現したいこと monaca Onsen UI V2 Vue Navigation (単一ファイルコンポーネント)でアプリを作成しております。 外部サーバーから取得した js

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 解決済

    C言語で上手く実行してくれないのですが…

    前提・実現したいこと C言語で自分の腕試しに簡易的なカードゲームを作ろうとしています。 発生している問題・エラーメッセージ コンパイルは問題なく出来ましたが、肝心の起動が上手く

  • 解決済

    【JavaScript】no-extend-native に対処したい【ESLint】(質問タイトル...

    (2017-11-04 8:50頃 追記) 旧タイトル「プロトタイプをよく分かっていなかったようです・・」を変更しました。 当初、「自分が上手くコードを書き替えられないのはプロトタ

  • 解決済

    関数の定義と呼び出しの記述について

    実現したいこと スタートボタンを押すとpairsで定義した全ての枚数のカードが裏返しになる。 現状 スタートボタンを押しても何も変化なし。 ソースコード html <!

  • 解決済

    スクリプトが競合しているとこを教えてください

    スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。 何かが競合しているのでしょうか? 解決策をご教授お願いいたします。 <!doctype ht

  • 解決済

    jQueryRotateの終了判定

    実現したいこと Monacaでスマートフォンアプリを製作しています。 jQueryRotateのアニメーション終了後に処理を追加したいです。 どなたかお力添えいただければ幸いです。

同じタグがついた質問を見る

  • Vue.js

    571questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。