Vue mixin을 활용한 이미지 에러 처리

🚀 뷰 믹스인

이미지 믹스인

//@/src/mixin/image/index.js
import defaultImage from "@/assets/images/default_background.png";

const imageMixin = {
    data() {
        return {
            defaultImage: defaultImage,
        };
    },
    methods: {
        onErrorImage(event) {
            // 1. this는 이 믹스인을 사용한 뷰 컴포넌트 객체!
            // this.src = defaultImage;
            //2.
            event.target.src = defaultImage;
        },
    },
};
export default imageMixin;

1. mixin내의 메소드에서 this는 이 메소드를 사용한 뷰 컴포넌트가된다.

믹스인을 사용하는 컴포넌트

export default {
	mixins: [imageMixin],
}

<img :src="poster" :alt="movieTitle" @error="onErrorImage($event)" />

믹스인에 정의되어있는 메소드 onErrorImage를 컴포넌트에서 사용할 수 있다.