Vue Js:作用域插槽和IE11的问题 [英] Vue Js: Issue with scoped slots and IE11
问题描述
我的组件看起来像这样:
My component looks like this:
<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，可以与其他任何组件配合正常工作
The imported mixin AjaxCaller, which works fine with any other component:
<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>
这是我从视图中调用它的方式:
And here's how I call it from within the view:
<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中运行-没什么问题.
Everything works fine in any browser other than IE 11 (and lower). It even works in Edge - no issues what so ever.
在IE中我得到
[Vue警告]:无法生成渲染函数:
[Vue warn]: Failed to generate render function:
语法错误:...中应有标识符.
Syntax Error: Expected identifier in ...
它甚至无法从mounted段中执行方法调用.
It doesn't even get to execute method call from within the mounted segment.
我将laravel-mix与Laravel一起使用，因此所有内容都使用webpack与babel进行了编译，因此这与ES6无关.
I use laravel-mix with Laravel so everything is compiled using webpack with babel so it's not ES6 related issue.
我已经花了一整夜的时间来尝试解决这个难题，因此我们将不胜感激.
I've already spent whole night trying to un-puzzle this so any help would be much appreciated.
推荐答案
我知道您已经说过您不相信这是ES6问题，但有证据表明是这样.
I know you've already said that you don't believe it's an ES6 issue but the evidence suggests it is.
IE11不支持解构.如果您在IE11控制台中键入var {record} = {}之类的内容，则会看到相同的错误消息期望的标识符".
IE11 doesn't support destructuring. If you type something like var {record} = {} into your IE11 console you'll see this same error message, 'Expected identifier'.
尝试搜索原始错误消息中的已编译代码，然后查找单词record.我怀疑您会找到这样的东西:
Try doing a search through the compiled code in your original error message and look for the word record. I suspect you'll find something like this:
fn:function({ record })
如果您看到它的意思是该结构破坏已在没有通过Babel进行编译的情况下进入了浏览器.
If you see that it means that the destructuring has made it to the browser without being compiled through Babel.
确切为什么会发生这种情况取决于您使用该作用域插槽模板的位置.如果要在单个文件组件中使用它，则应该通过Babel，但如果不这样做，则它可能会在不进行编译的情况下直接进入浏览器.您说您是在从视图内"调用它，但这并不能确切说明您的使用方式.在文档中有关于此内容的注释:
Exactly why this is happening depends on where you're using that scoped slot template. If you're using it inside a single-file component it should be going through Babel but if you aren't then it may be making it to the browser without transpiling. You said that you're calling it 'from within the view' but that doesn't clarify exactly how you're using it. There's a note about this in the docs, for what it's worth:
https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope
假设您无法直接解决转码问题(例如，将模板移至将要通过Babel的位置)，则只需删除ES6解构即可.像这样:
Assuming you aren't able to fix the transpiling problem directly (e.g. by moving the template to somewhere it'll go through Babel) you can just remove the ES6 destructuring. So something like:
<div slot-scope="slotProps">
，然后在随后的代码中使用slotProps.record代替record.
and then using slotProps.record instead of record in the code that follows.
这篇关于Vue Js:作用域插槽和IE11的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
