vue.js テンプレート

僕のメモ。


## 配列並び替え先頭に追加

```

//選択されたキーを消して、最初に追加
                this.dataKey = e.currentTarget.getAttribute('data-key');
                let tmp = this.user.socials.splice(this.dataKey, 1);
                this.user.socials.unshift(tmp[0]);

```


## クリックされた要素のdata属性を取得


```

        <div v-for="(v,key) in user.socials">

            <img v-bind:src="v.img"/>
            {{v.id}} {{v.name}} さん

            <a v-on:click="del" :data-id="v.id">削除</a>//この :data-id が味噌


        </div>

<script>

     methods: {

            del: function(e){
                console.log(e.currentTarget.getAttribute('data-id'));
            },

</script>

```


## axios テンプレート

　なんでだ？ bind せずとも、axios 内で this が使えるぞ。。。

```

let dataform = new FormData();
                dataform.append('social_id', e.currentTarget.getAttribute('data-id'));
                dataform.append('crypt_id', this.user.crypt_id);
                
                this.dataKey = e.currentTarget.getAttribute('data-key');

                axios.post('/auth/remove/',dataform).then(e => {
                    
                    //データを消す
                    this.user.socials.splice(this.dataKey, 1);
                    let tmp = JSON.stringify(this.user);//jsonにして保存
                    localStorage.setItem('user',tmp);

                }).catch((error) => {
                    console.log(error);
                });


```


```

<template>
    <div>


<!--        vue2-touch-events-->
        <div style="height: 100px; background-color:red;" v-touch:swipe="toggleMenu">スワイプしたら toggleMenu メソッド を実行</div>
        <a v-on:click="foo">クリックしたら foo メソッドを実行</a>


<!--        親の linkTo メソッドを実行し、 upload へ リンク-->
        <a v-touch="$parent.linkTo('/upload')">アップロード</a>


        <h2>$parent.loading で 親要素の data にアクセス // v-on:change でファイルの選択を検知する</h2>
        <input v-show="!$parent.loading" @change="selectedFile" type="file" name="file">



<!--        jsonの中身が変わるたびに watch で count が変更される-->
        <p>
            合計 @{{count}} 枚の画像があります
        </p>


<!--        繰り返し処理  json の name を 使って画像を表示 -->
        <div v-for="(v,key) in json">
            <img v-on:click="del(key)" v-bind:src="'images/300x300_' + v.name + '.jpg'"/>
        </div>




    </div>
</template>

<script>
    export default {

        data() {
            return {
                json:{},
                count:0
            };
        },

        mounted() {

            //ユーザー情報をJSONから読み出すか
            this.user = JSON.parse(localStorage.user);


            //axios テンプレート
            axios
                .get('/photo/show/'+this.user.id+'/')
                .then(function(response) {
                    this.json = response.data;
                    console.log("画像データ取得");
                }.bind(this))//bind をすることで axios、then 内で this を使える
                .catch(function(error) {
                    // error 処理
                    console.log(error);
                    console.log("画像データ取得エラー");
                });


        },
        created() {



        },
        methods: {

            del: function(key){



                // FormData を利用して File を POST する
                let formData = new FormData();

                formData.append('id',this.json[key].id);
                formData.append('crypt_id',this.user.crypt_id);


                axios
                    .post('/photo/del/', formData)
                    .then(function(response) {
                    })
                    .catch(function(error) {
                        // error 処理

                        console.log(error);
                        console.log("エラー");

                    });


                //jsonを削除する
                this.json.splice(key, 1);


            },

            selectedFile: function(e) {

                //javascript内は this 必須
                this.$parent.loading = true;

                // 選択された File の情報を保存しておく
                e.preventDefault();
                let files = e.target.files;

                // FormData を利用して File を POST する
                let formData = new FormData();
                formData.append('image',files[0]);
                formData.append('crypt_id',this.user.crypt_id);

                let config = {
                    headers: {
                        'content-type': 'multipart/form-data'
                    }
                };

                axios
                    .post('/photo/store/', formData, config)
                    .then(function(response) {
                        //ここで追加

                        //アップロード完了 というメッセージを elementui にて出す
                        this.$message({
                            message: 'アップロード完了',
                            type: 'success'
                        });
                        this.json.unshift(response.data);
                        this.$parent.loading = false;

                    }.bind(this))
                    .catch(function(error) {
                        // error 処理
                        this.$message({
                            message: 'エラー',
                            type: 'error'
                        });
                        console.log(error);
                        this.$parent.loading = false;

                    }.bind(this))

            }
        },
        watch: {
            json (newVal, oldVal) {
                this.count = newVal.length;
            }
        }
    }
</script>

```