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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

Q&A

0回答

226閲覧

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

naoya0206k1

総合スコア12

Vue.js

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

0グッド

0クリップ

投稿2018/08/10 10:01

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>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rubytomato

2018/08/10 17:27

エラーが出ていないということなのですがchromeのコンソールにも何も出ていないということでしょうか? それとDjangoのことは分からないので申し訳ないのですが、APIリクエストした結果を "return { approved: null };" というようにデータらしいデータを返していませんがこの辺りは関係ないでしょうか?
naoya0206k1

2018/08/11 06:06

ConsoleにErrorが出てきたところは修正してError出ないようにしてもCardが表示されないんですよね..
naoya0206k1

2018/08/11 06:08

> "return { approved: null };"   これはどこで確認できるのでしょうか。お手数おかけします!
rubytomato

2018/08/11 09:37

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

2018/08/11 12:33

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

2018/08/11 12:37

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問