教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
ここでは、通信ライブラリ Axios を利用して 1章で作成した Rails の API を呼び出します。
まずは、次のようにコードを追記しましょう。
Copied!└── public
└── first_vue.html(変更前)
html1234567891011121314151617181920212223242526272829303132333435363738394041 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- ここに追記 -->
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge' // この行から追記
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
changeMsg: function() {
this.message = 'Changed Message' // この行から編集
},
}
})
</script>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- ここから追記 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- ここまで追記 -->
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge',
// ここから追記する
list: [{title:'title1'}, {title:'title2'}] // 説明 2.14
// ここまで追記する
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
changeMsg: function() {
this.message = 'Changed Message'
// ここから追記する
this.message2 = this.list[0]['title'] // 説明 2.15
// ここまで追記する
},
}
})
</script>
</body>
</html>
追加箇所の説明をしていきます。
ここでは、変数 list
として連想配列の配列を定義します。(説明 2.14)
js1234 Copied!changeMsg: function() {
this.message = 'Changed Message'
this.message2 = this.list[0]['title'] // 説明 2.15
}
ここで、list
で定義した連想配列の配列の1つ目の要素の title
キー から値を取り出して message2
に代入しています。(説明 2.15)
この変更の結果、Change ボタンを押すと下記のような状態になるはずです。
次に、以下のように変更を加えましょう。
Copied!└── public
└── first_vue.html(変更前)
html12345678910111213141516171819202122232425262728293031323334353637383940414243 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge',
list: [{title: 'title1'}, {title: 'title2'}]
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
changeMsg: function() {
this.message = 'Changed Message'
this.message2 = this.list[0]['title'] // この行から編集
},
}
})
</script>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge',
list: [{title: 'title1'}, {title: 'title2'}]
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
changeMsg: function() {
this.message = 'Changed Message'
// ここから編集する
axios.get('/snippets.json') // 説明 2.16
.then(response => ( // 説明 2.17
this.message2 = response.data[0]['title'] // 説明 2.18
)
)
// ここまで編集する
},
}
})
</script>
</body>
</html>
changeMsg
メソッドの中で、axios という通信ライブラリを用いて Rails で実装した API を呼び出します。 (説明 2.16)
ここで、呼び出した API のレスポンスを .then(response => ())
の => ()
の中で、response
として値を渡して処理できます。(説明 2.17)
具体的にここでは1章で sqlite コマンドを用いて登録したデータを json 形式で response
として取得し、1件目のタイトルを 変数 message2
に代入します。(説明 2.18)
ここまでできたら、次のステップに進みましょう。
Copied!└── public
└── first_vue.html(変更前)
html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button> <!-- この次の行に追記 -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge',
list: [{title: 'title1'}, {title: 'title2'}]
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
changeMsg: function() {
this.message = 'Changed Message'
axios.get('/snippets.json')
.then(response => (
this.message2 = response.data[0]['title']
)
);
}, // この行から追記
}
})
</script>
</body>
</html>
Copied!└── public
└── first_vue.html(変更後)
html1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 Copied!<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Snippet App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<p>{{ message2 }}</p>
<button v-on:click="changeMsg">Change</button>
<!-- ここから追記する -->
<ul>
<li v-for="data in list">{{ data.title }}</li> <!-- 説明 2.19 -->
</ul>
<button v-on:click="listSnippet">listSnippet</button> <!-- 説明 2.20 -->
<!-- ここまで追記する -->
</div>
<script>
new Vue({
el: '#app',
data () {
return {
message: 'Hello Vue!',
message2: 'Hoge',
list: [{title: 'title1'}, {title: 'title2'}]
}
},
mounted () {
this.setMsg();
},
methods: {
setMsg: function () {
this.message = 'Set Message';
},
changeMsg: function() {
this.message = 'Changed Message'
axios.get('/snippets.json')
.then(response => (
this.message2 = response.data[0]['title']
)
);
},
// ここから追記する
listSnippet: function() {
axios.get('/snippets.json')
.then(response => (
this.list = response.data // 説明 2.21
)
);
}
// ここまで追記する
}
})
</script>
</body>
</html>
v-for
で data ()
で定義した 配列 list
の各要素を data
として1つ目から最後まで反復して処理させます。(説明 2.19)
v-on:click
で button 要素をクリックした時に実行するメソッドを指定します。ここでは listSnippet
としました。(説明 2.20)
js1234567 Copied!listSnippet: function() {
axios.get('/snippets.json')
.then(response => (
this.list = response.data // 説明 2.21
)
);
}
今度は、response.data
で配列になっている状態のまま 変数 list
に代入します。(説明 2.21)
これができたら、次のステップに進みましょう。次は、データ投稿用のメソッドを定義して実行してみます。
"newtitle"の出力はされるのですが、出力される順番が違っていたため、お手数ですがご確認頂けますか?
listSnippetボタンを押すと、newtitleが一番下に表示される。
<vueファイル>
https://gyazo.com/1d6f8c24ebe729560f04b6f241427c69
<snippet.jsonファイル>
https://gyazo.com/1367e6a9b4f3446a2f8ab18344e445e3
スペルチェックやコロンのつけ忘れが無いか確認
コードの処理のカッコの末尾にセミコロンをつけるときと省略している時の違いがわからないです。
どのように判断して記述していけば良いでしょうか?
説明説明 2.17〜説明 2.18にかけてのaxiosの挙動について質問します。
axiosを初めて使うためよくわかりません。
ES6の記法で書くと期待通りにイベントが成功するのですが、
ES5の記法で書くとブラウザの表示が変化しません。(console.logでは"title1"がちゃんと出力されます)
Promiseの場合だとどちらで書いても動いたので「axios then」などで
調べてみましたが、console.logでresponseを出力する例しかヒットせず
理由がわかりませんでした。
axiosはES6記法でないと動かないのでしょうか?
それともVueとの相性の問題なのでしょうか?
Copied!OKな例
changeMsg: function(){
this.message = "Canged Message";
axios.get('/snippet_apps.json')
.then((response) => { // ES6
console.log(response.data[0]['title']); // "title1"
this.message2 = response.data[0]['title']; // "Hoge"が"title1"に変化
});
}
functionで記述するとconsole.logには"title1"が出力されるのですが、
ブラウザでは"Hoge"が変化しません。
Copied!NGな例
changeMsg: function(){
this.message = "Canged Message";
axios.get('/snippet_apps.json')
.then(function(response){ // ES5
console.log(response.data[0]['title']); // "title1"
this.message2 = response.data[0]['title']; // "Hoge"のまま
});
}
axiosのデバックの方法を教えていたけますでしょうか?
例えば、以下のresponseの中身がどういった値が入っているの確認方法がわかりません。
Copied! changeMsg: function() {
this.message = 'Changed Message'
axios.get('/snippets.json')
.then(response => (
this.message2 = response.data[0]['title']
)
);
},
console.log(response)とかを差し込めば良いのでしょうか?