こんにちわ、ゆきねこです。

社内でもっとモダンな開発スタイルを取り入れようぜってことで、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 = "検索結果は0件です。";
                }
            }).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 = "検索結果は0件です。";
    }
}).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 = "検索結果は0件です。";
    }
}).catch(error => {
    this.errorMsg = "通信エラー";
})

 

カテゴリー: JavaScript

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。