Vue Js:带有作用域的插槽和IE11的问题

Question

我的组件看起来像这样:

<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>

导入的mixin 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(及更低版本)以外的任何浏览器中,一切正常.它甚至可以在Edge中运行 - 没有任何问题.

在IE中,我得到了

[Vue警告]:无法生成渲染功能:

语法错误:预期的标识符在......

它甚至不能从mounted段内执行方法调用.

我用laravel-mix用Laravel,所以一切使用编译的webpack使用babel,所以它不是ES6相关的问题.

我已经整晚都试图解开这个问题所以任何帮助都会非常感激.

Answer 1

我知道你已经说过你不相信这是一个ES6问题,但证据表明它是.

IE11不支持解构.如果您var {record} = {}在IE11控制台中键入类似内容,您将看到相同的错误消息"预期标识符".

尝试搜索原始错误消息中的已编译代码并查找该单词record.我怀疑你会发现这样的事情:

fn:function({ record })

如果你看到它意味着解构已经进入浏览器而没有通过Babel进行编译.

究竟为什么会发生这种情况取决于您使用该范围的插槽模板的位置.如果你在单个文件组件中使用它,它应该通过Babel,但如果你不是,那么它可能会在没有转换的情况下进入浏览器.你说你从视图中"调用它",但这并没有明确说明你是如何使用它的.在文档中有一个关于这个的说明,它的价值是什么:

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

假设你是不是能够直接解决问题transpiling(例如,通过模板移动到的地方它会经过巴贝尔),你可以只取出ES6解构.所以类似于:

<div slot-scope="slotProps">

然后使用slotProps.record而不是record在后面的代码中.