質問編集履歴

2 追記

hidayoshi

hidayoshi score 4

2018/07/20 14:03  投稿

vue.jsでinputボタンが押された時に@clickをtrueにして表示させたい
### 前提・実現したいこと
vue.jsでinputボタンが押された時に@clickをtrueにして表示させたい。idを入力してもらってそのidとgithubAPIからユーザーのレポジトリを取得したいのですが、ボタンを押してもtrueにならないようなので表示ができません。
また、v-ifは<template>の中で使うみたいなことがネットに書いてあったのですが本当ですか?
あとvar vm = new Vueの上の$(functionは必要でしょうか?Vueを囲う理由が分からなかったのでコメントにして消しています。
### 該当のソースコード
```
___________________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)を入力して下さい">
       <p> {{ user }}</p>
       <input type="button" value="決定" @click="getAPI(), isVisible = true">
   </div>
<!--<template v-if="isVisible">--><div v-if="isVisible">
   <div v-for="repo in github.repos">
       <span><span v-text="repo.stargazers_count"></span> &star;</span>
       <h2 v-text="repo.name"></h2>
       <p v-text="repo.description"></p>
   </div>
   </div>
<!--</template>-->
   
   <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____________________
//$(function () {
   var vm = new Vue({
       el: '#app',
       data: {
           github: {
               repos: []
           },
            user: null,
            isVisible: false
       },
   methods: {
       getAPI: function() {
       var user = this.user;
         $.get('https://api.github.com/users/' + user + '/repos').then( (repos) => {
       vm.github.repos = repos;
             console.log(repos);
   });
       }
   }
})
   
```
### 試したこと
レポジトリ取得までは上手くいっているようなのでv−ifが動作していないのだと思います。
###追記
@click="isVisible = true"の部分が反応しないのでisVisibleをtrueにするための関数を作り実行したところ、コンソール上ではtrueになっていました。しかしその後の<div v-if="isVisible">が反応しません。v-ifの使い方が間違っているのでしょうか。
@click="isVisible = true"の部分が反応しないのでisVisibleをtrueにするための関数を作り実行したところ、コンソール上ではtrueになっていました。しかしその後の<div v-if="isVisible">が反応しません。それどころかisVisibleを初期はfalseにしているのに、v-ifで囲っているところが最初から表示されています。 v-ifの使い方が間違っているのでしょうか。
###コード
```
<!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)を入力して下さい">
       <p> {{ user }}</p>
       <input type="button" value="決定" @click="getAPI(), change()">
<!--       v-model="isVisible">-->
   </div>
<!--<template v-if="isVisible">--><div v-if="isVisible">
   <div v-for="repo in github.repos">
       <span><span v-text="repo.stargazers_count"></span> &star;</span>
       <h2 v-text="repo.name"></h2>
       <p v-text="repo.description"></p>
   </div>
   </div>
<!--</template>-->
   
   <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() {
       var user = this.user;
         $.get('https://api.github.com/users/' + user + '/repos').then( (repos) => {
       vm.github.repos = repos;
             console.log(repos);
   });
       },
       change: function() {
           this.isVisible = true;
           console.log(this.isVisible);
       }
   }
});
```
  • JavaScript

    20440 questions

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

  • HTML5

    5136 questions

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

  • Vue.js

    1322 questions

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

1 追記

hidayoshi

hidayoshi score 4

2018/07/20 13:55  投稿

vue.jsでinputボタンが押された時に@clickをtrueにして表示させたい
### 前提・実現したいこと
vue.jsでinputボタンが押された時に@clickをtrueにして表示させたい。idを入力してもらってそのidとgithubAPIからユーザーのレポジトリを取得したいのですが、ボタンを押してもtrueにならないようなので表示ができません。
また、v-ifは<template>の中で使うみたいなことがネットに書いてあったのですが本当ですか?
あとvar vm = new Vueの上の$(functionは必要でしょうか?Vueを囲う理由が分からなかったのでコメントにして消しています。
### 該当のソースコード
```
___________________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)を入力して下さい">
       <p> {{ user }}</p>
       <input type="button" value="決定" @click="getAPI(), isVisible = true">
   </div>
<!--<template v-if="isVisible">--><div v-if="isVisible">
   <div v-for="repo in github.repos">
       <span><span v-text="repo.stargazers_count"></span> &star;</span>
       <h2 v-text="repo.name"></h2>
       <p v-text="repo.description"></p>
   </div>
   </div>
<!--</template>-->
   
   <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____________________
//$(function () {
   var vm = new Vue({
       el: '#app',
       data: {
           github: {
               repos: []
           },
            user: null,
            isVisible: false
       },
   methods: {
       getAPI: function() {
       var user = this.user;
         $.get('https://api.github.com/users/' + user + '/repos').then( (repos) => {
       vm.github.repos = repos;
             console.log(repos);
   });
       }
   }
})
   
```
### 試したこと
レポジトリ取得までは上手くいっているようなのでv−ifが動作していないのだと思います。
レポジトリ取得までは上手くいっているようなのでv−ifが動作していないのだと思います。
###追記
@click="isVisible = true"の部分が反応しないのでisVisibleをtrueにするための関数を作り実行したところ、コンソール上ではtrueになっていました。しかしその後の<div v-if="isVisible">が反応しません。v-ifの使い方が間違っているのでしょうか。
###コード
```
<!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)を入力して下さい">
       <p> {{ user }}</p>
       <input type="button" value="決定" @click="getAPI(), change()">
<!--       v-model="isVisible">-->
   </div>
<!--<template v-if="isVisible">--><div v-if="isVisible">
   <div v-for="repo in github.repos">
       <span><span v-text="repo.stargazers_count"></span> &star;</span>
       <h2 v-text="repo.name"></h2>
       <p v-text="repo.description"></p>
   </div>
   </div>
<!--</template>-->
   
   <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() {
       var user = this.user;
         $.get('https://api.github.com/users/' + user + '/repos').then( (repos) => {
       vm.github.repos = repos;
             console.log(repos);
   });
       },
       change: function() {
           this.isVisible = true;
           console.log(this.isVisible);
       }
   }
});
```
  • JavaScript

    20440 questions

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

  • HTML5

    5136 questions

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

  • Vue.js

    1322 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る