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

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

ただいまの
回答率

90.52%

  • JavaScript

    16349questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4002questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vue.js

    689questions

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

vue.jsで詳細ボタンを押すと詳細が表示されるようにしたい。

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 163

hidayoshi

score 4

 前提・実現したいこと

まず、githubのidを入力するとそのidの人のレポジトリの一覧と詳細ボタンが表示され、
次にその詳細ボタンを押すと、レポジトリの詳細な情報(スター数とか)が表示されるというプログラムを書きたいです。

 発生している問題・エラーメッセージ

問題は詳細ボタンを押して情報を取得することです。それぞれのレポジトリごとに詳細ボタンを配置しているのですが、どれを押してもすべてのレポジトリの情報が展開されてしまいます。

この解決策として、各レポジトリにフラグを追加して真偽を判定させようと思ったのですが上手く出来ませんでした。どうすればよいでしょうか。

質問したいことは

  • v-forを回して表示させている詳細ボタンを押すことでそれぞれのレポジトリの情報を取得する方法

よろしくおねがいします。

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>課題</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div id="app">
        <input type="text" v-model="user" placeholder="ユーザー名(id)を入力して下さい">
        <input type="button" value="決定" @click="getAPI(), isVisible=true">

        <template v-if="isVisible">
    <div v-for="repo in github.repos">
        <h2 v-text="repo.name"></h2>
        <input type="button" value="詳細" @click="change">

        <template v-if="github.open">
            <span><span v-text="repo.stargazers_count"></span> &star;</span>
        <p v-text="repo.description"></p>
        </template>
    </div>
    </template>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/main.js"></script>
</body>

</html>

---------------------------------------------------
    var vm = new Vue({
        el: '#app',
        data: {
            github: {
                repos: [],
                open: false

            },
            user: null,
            isVisible: false
        },
        methods: {
            getAPI: function () {
                let user = this.user;
                $.get('https://api.github.com/users/' + user + '/repos').then((repos) => {
                    vm.github.repos = repos;
                    console.log(repos);
                });
            },
             change: function () {
                if (this.github.open === false) {
                    this.github.open = true;
                } else {
                    this.github.open = false;
                }
                console.log(this.github.open);
            }
        }
    });

 試したこと

indexをそれぞれのclassとかv-ifにつけて別々のレポジトリとして認識させようとしましたが出来ませんでした。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

reposにて取得された各リポジトリにopenプロパティを持たせて、v-if=github.open => v-if=repo.open といった形に修正してはいかがでしょうか。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/20 19:18

    回答の意味が理解できたので直してみたのですが上手くいきません。reposごとに真理値を変える必要があると思ったのでchange関数にrepoを渡して真理値を変更させようとしたのですが、この書き方は間違っているのでしょうか。

    ##########html################
    <input type="button" value="詳細" @click="change(repo)">
    ##############JS####################
    var vm = new Vue({
    el: '#app',
    data: {
    github: {
    repos:[open=false]
    },
    user: null,
    isVisible: false
    },
    methods: {
    getAPI: function () {
    let user = this.user;
    $.get('https://api.github.com/users/' + user + '/repos').then((repos) => {
    vm.github.repos = repos;
    console.log(repos);
    });
    },
    change: function (repo) {
    if (repo.open === false) {
    repo.open = true;
    } else {
    repo.open = false;
    }
    console.log(repo.open);

    }
    }
    });

    キャンセル

  • 2018/07/20 19:24 編集

    reposにはリポジトリのリストになるようです。取得時に全てのリストにopenプロパティをセットする必要がありそうですね。
    イメージ的には、reposを展開したあとのrepo.openといったプロパティの追加が必要かと思われます。
    先程の回答、言葉足らずでごめんなさい。私もまだまだ勉強中のため、他にももっといい方法が有るかもしれません・・・

    キャンセル

  • 2018/07/22 15:07 編集

    openを追加する関数addDetailBottonを作りやってみたところ、コンソール上ではボタンを押すと対応したリストのopenがtrueになっているのですが、実際の画面では反応しませんでした。おそらくv-ifに変更が届いてないと思うのですが、コンソール上では反応するのに画面の変更はできないのか理由がわかりません。

    _______html
    <!DOCTYPE html>
    <html lang="ja">

    <head>
    <meta charset="UTF-8">
    <title>課題</title>
    <link rel="stylesheet" href="css/styles.css">
    </head>

    <body>
    <div id="app">
    <input type="text" v-model="user" placeholder="ユーザー名(id)を入力して下さい">
    <input type="button" value="決定" @click="getAPI(), isVisible=true">

    <template v-if="isVisible">
    <div v-for="(repo, index) in github.repos">
    <h2 v-text="repo.name"></h2>
    <input type="button" class="btn" value="詳細" @click="repo.open=!repo.open">

    <template v-if="repo.open">
    <span><span v-text="repo.stargazers_count"></span> &star;</span>
    <p v-text="repo.description"></p>
    <p> index : {{ index }}</p>
    </template>
    </div>
    </template>

    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/main.js"></script>
    </body>

    </html>

    __________js_____________
    var vm = new Vue({
    el: '#app',
    data: {
    github: {
    repos:[]
    },
    user: null,
    isVisible: false
    },
    methods: {
    getAPI: function () {
    let user = this.user;
    $.get('https://api.github.com/users/' + user + '/repos').then((repos) => {
    vm.github.repos = repos;
    this.addDetailBotton();
    console.log(repos);
    });
    },
    addDetailBotton: function() {
    for(let i = 0;i < vm.github.repos.length;i++) {
    vm.github.repos[i].open = false;
    console.log(vm.github.repos[i].open);
    }
    }
    }
    });

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16349questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4002questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Vue.js

    689questions

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