前提・実現したいこと
ここに質問の内容を詳しく書いてください。
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
vue.jsとgithubAPIを用いてレポジトリに関する情報を表示させようとしているのですがうまくいきません。まだvue.jsを初めたばかりでとりあえずここの方のものをコピペして動かしてみたところ、全く動きませんでした。 [https://int128.hatenablog.com/entry/2014/11/24/152105] なので自分で調べた結果、v-repeatはもう使われていないことを初めとした色々なことがわかったので自分で見よう見まねでプログラムを作ることにし、とりあえずレポジトリの情報を取得してレポジトリの名前を表示させようと思いました。しかし動作しません。 できればURL先のプログラムがなぜ動かないのかを教えていただきたいのですが、下のコードの動かし方を教えていただけるだけでも充分です。よろしくおねがいします。 ### 該当のソースコード <div id="app" v-for="repo in github.repos"> <p>{{ repo.name }}</p> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> $(function () { var vm = new Vue({ el: '#app', data: { github: { url: 'https://github.com/octocat', repos: [] } } }); $.get('https://api.github.com/users/octocat/repos').then(function (repos) { vm.github.repos = repos; }); }); // //Vue.filter('head', function (value, size) { // if (value instanceof Array) { // return value.slice(0, size); // } else { // console.warn('argument of head filter must be an array'); // return value; // } //}); </script> ```ここに言語名を入力 vue.js javascript html
試したこと
レポジトリ情報の取得までは上手くいっているようなので、v-forの回し方が悪いのだと思い色々試しました。簡単な配列程度ならv-forを回して表示させることはできるのですが、複数のデータを表示させる方法がわかりません。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/19 07:17