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>导入的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 (和更低的浏览器)之外，任何浏览器都可以正常工作。它甚至在边缘工作--从来没有任何问题。
在IE中我得到
Vue警告:未能生成呈现函数： 语法错误:预期标识符在.
它甚至不能从mounted段中执行方法调用。
我在Laravel中使用Laravel，所以所有东西都是用webpack和babel编译的，所以这不是与ES6相关的问题。
我已经花了一整晚试着解决这个问题，所以任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2018-04-14 01:52:38
我知道你已经说过，你不相信这是一个ES6问题，但有证据表明是的。
IE11不支持破坏。如果您在您的var {record} = {}控制台中键入类似于IE11的内容，您将看到同样的错误消息，即“预期标识符”。
尝试在原始错误消息中搜索编译后的代码，并查找单词record。我想你会找到这样的东西：
fn:function({ record })如果您看到，这意味着破坏已经使它到浏览器，而不是通过Babel编译。
这种情况发生的确切原因取决于您在何处使用该范围内的槽模板。如果您在单个文件组件中使用它，那么它应该通过Babel，但是如果没有，那么它可能会在不转移的情况下进入浏览器。你说你叫它“从视图中”，但这并不能确切地说明你是如何使用它的。在文档中有一条关于这个的注释，关于它的价值是什么：
https://v2.vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope
假设您无法直接修复转换问题(例如，通过将模板移动到某个地方，它将通过Babel)，那么您只需删除ES6破坏即可。所以，就像：
<div slot-scope="slotProps">然后在下面的代码中使用slotProps.record而不是record。
https://stackoverflow.com/questions/49797249
复制相似问题
腾讯云开发者
