こんにちわ、ゆきねこです。
社内でもっとモダンな開発スタイルを取り入れようぜってことで、JavaScriptを書く際はES6に合わせる方向性になりました。
ただ、vue.jsの本ではES6対応してなかったので、対応の仕方を書いておきます。
コードはこんな感じです。
var app = new Vue({
el:'#app',
data:{
keyword:'',
errorMsg:'',
items:[],
},
methods:{
searchItem(keyword){
searchUrl = "https://test.co.jp/";
sendData = {"keyword":keyword};
this.errorMsg = '';
this.items = [];
axios({
method:"get",
url:searchUrl,
params:sendData
})
.then(data => {
if (data.items.length) {
this.items = data.items;
}else{
this.errorMsg = "検索結果は０件です。";
}
}).catch(error => {
console.log(error)
this.errorMsg = "通信エラー";
})
}
}
})
本とかですと、以下のようになっていることが多いかと思います。
methods:{
searchItem:function (keyword){
}
}
ES6ではfunctionが非推奨なのでここから:とfunctionを消して記述すると以下のようになります。
methods:{
searchItem(keyword){
}
}
あとはAPIと通信する時にaxiosを使いますが、だいたい以下のようなコードになるかと思います。
axios({
method:"get",
url:searchUrl,
params:sendData
}).then(function(data) {
if (data.items.length) {
this.items = data.items;
}else{
this.errorMsg = "検索結果は０件です。";
}
}).catch(function(error) {
this.errorMsg = "通信エラー";
})
これもアロー関数に変更すると以下のようになります。
axios({
method:"get",
url:searchUrl,
params:sendData
}).then(data => {
if (data.items.length) {
this.items = data.items;
}else{
this.errorMsg = "検索結果は０件です。";
}
}).catch(error => {
this.errorMsg = "通信エラー";
})
0件のコメント