Vue Js: 범위 지정 슬롯 및 IE11 문제

Vue Js: 범위 지정 슬롯 및 IE11 문제

내 컴포넌트는 다음과 같습니다.

<template>
    <div>
        <div v-if="!loaded">
            <p><i class="fas fa-spinner fa-spin"></i> Loading feed</p>
        </div>

        <div v-else>

            <div data-slider ref="feedSlider" v-if="length > 0">
                <div class="swiper-wrapper">
                    <div class="slide" v-for="record in records" :key="record.id">
                        <slot :record="record"></slot>
                    </div>
                </div>
            </div>

            <div v-else>
                <p>There are no records available.</p>
            </div>

        </div>

    </div>
</template>
<script>
    import Swiper from 'swiper';
    import AjaxCaller from '../../mixins/AjaxCaller';
    export default {
        mixins: [AjaxCaller],
        data() {
            return {
                loaded: false,
                records: [],
                length: 0,
            }
        },
        mounted() {
            this.makeCall(this.success, this.failure);
        },
        methods: {
            success(response) {
                this.loaded = true;
                if (!response.data.records) {
                    return;
                }
                this.records = response.data.records;
                this.length = this.records.length;
                if (this.length < 2) {
                    return;
                }
                setTimeout(() => {
                    this.initiateSlider();
                }, 1000);
            },
            initiateSlider() {
                (new Swiper(this.$refs.feedSlider, {
                    effect: 'slide',
                    slideClass: 'slide',
                    slideActiveClass: 'slide-active',
                    slideVisibleClass: 'slide-visible',
                    slideDuplicateClass: 'slide-duplicate',

                    slidesPerView: 1,
                    spaceBetween: 0,
                    loop: true,
                    speed: 2000,
                    autoplay: {
                        delay: 5000,
                    },
                    autoplayDisableOnInteraction: false,
                }));
            },
            failure(error) {
                this.stopProcessing();
                console.log(error);
            }
        }
    }
</script>

Import된 믹스인AjaxCaller다른 컴포넌트에서는 정상적으로 동작합니다.

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            method: {
                type: String,
                default: 'post'
            }
        },
        data() {
            return {
                processing: false
            }
        },
        computed: {
            getMethodParams() {
                if (this.method === 'post') {
                    return {};
                }
                return this.requestData();
            },
            postMethodData() {
                if (this.method === 'get') {
                    return {};
                }
                return this.requestData();
            }
        },
        methods: {
            requestData() {
                return {};
            },
            startProcessing() {
                this.processing = true;
                this.startProcessingEvent();
            },
            stopProcessing() {
                this.processing = false;
                this.stopProcessingEvent();
            },
            startProcessingEvent() {},
            stopProcessingEvent() {},
            makeCall(success, failure) {
                this.startProcessing();
                window.axios.request({
                        url: this.url,
                        method: this.method,
                        params: this.getMethodParams,
                        data: this.postMethodData
                    })
                    .then(success)
                    .catch(failure);
            }
        }
    }
</script>

뷰 내에서는 이렇게 부르고 있습니다.

<feed-wrapper url="{{ route('front.news.feed') }}">
    <div slot-scope="{ record }">
        <p>
            <a :href="record.uri" v-text="record.name"></a><br />
            <span v-text="record.excerpt"></span>
        </p>
    </div>
</feed-wrapper>

IE 11 이하 브라우저에서는 모두 정상적으로 동작합니다.엣지에서도 동작합니다.이러한 문제는 없습니다.

IE에서는 다음과 같이 됩니다.

[Vue warn] :렌더링 함수를 생성하지 못했습니다.

구문 오류: ...에 식별자가 필요합니다.

이 명령어에서는 Method Call을 실행할 수 없습니다.mounted부분.

사용하고 있다laravel-mix와 함께Laravel그래서 모든 것을 컴파일해서webpack와 함께babelES6와 관련된 문제가 아닙니다.

난 이미 밤새도록 이걸 풀려고 노력했으니까 어떤 도움이라도 주면 고맙겠어.

ES6 문제가 아니라고 이미 말씀하셨지만 증거가 시사하는 바입니다.

IE11은 파괴를 지원하지 않습니다.예를 들어 다음과 같습니다.var {record} = {}IE11 콘솔에 동일한 오류 메시지 'Expected identifier'가 표시됩니다.

원래 오류 메시지에서 컴파일된 코드를 검색하여 단어를 찾습니다.record아마 이런 걸 발견하게 될 거예요

fn:function({ record })

파괴가 Babel을 통해 컴파일되지 않고 브라우저에 도달했음을 의미합니다.

이 문제가 발생하는 정확한 이유는 스코프 슬롯템플릿을 사용하는 위치에 따라 달라집니다.단일 파일 컴포넌트 내에서 사용하는 경우 Babel을 통과해야 하지만 그렇지 않은 경우 변환 없이 브라우저로 이동할 수 있습니다.당신은 그것을 '보기 안에서'라고 부르고 있다고 말했지만, 그것은 당신이 그것을 어떻게 사용하는지를 명확하게 하지 않는다.이 내용은 문서에 기재되어 있습니다.

https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope

트랜스파일링 문제를 직접 해결할 수 없는 경우(예를 들어 템플릿을 Babel을 통과하는 곳으로 이동함) ES6 파괴를 제거할 수 있습니다.예를 들어 다음과 같습니다.

<div slot-scope="slotProps">

그 후 를 사용하여slotProps.record대신record다음 코드로 이동합니다.

언급URL : https://stackoverflow.com/questions/49797249/vue-js-issue-with-scoped-slots-and-ie11