Question

我的组件如下所示：

try {   
    $con = new PDO('mysql:host='.$servername.';dbname=mb', $username, $password);
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    //SQL Call
    $sql_project = "
      SELECT *, COUNT(solution) AS solution_count
      FROM projectslider
      WHERE solution = '". $page ."'
    ";

    if ($project_stmt = $con->prepare($sql_project)) {
        $project_stmt->execute();
        $project_rows = $project_stmt->fetchAll(PDO::FETCH_ASSOC);
        echo '<section id="solProj">';
        foreach ($project_rows as $project_row) {
            $solution_count = $project_row['solution_count'];
            $project_solution = $project_row['solution'];
            $project_img = $project_row['image'];
            $project_alt = $project_row['alt'];
            $project_img = '<img class="home-comment-profile-pic" src=" '. $project_img .'" alt="' . $project_alt .'">';
            if ($solution_count === 0) {
                echo 'No projects found.';
            } else {
                echo '<div class="projSlide">';
                echo $project_img;
                echo '</div>';

            }
        }
        echo '</section>';
    }
}
catch(PDOException $e) {
    echo "Connection failed: " . $e->getMessage();
}

导入的mixin $sql_project_count = " SELECT *, COUNT(solution) AS solution_count FROM projectslider WHERE solution = '". $page ."' "; $sql_project = " SELECT * FROM projectslider WHERE solution = '". $page ."' "; if ($project_stmt_count = $con->prepare($sql_project_count)) { $project_stmt_count->execute(); $project_rows_count = $project_stmt_count->fetchAll(PDO::FETCH_ASSOC); foreach ($project_rows_count as $project_row_count) { $solution_count = $project_row_count['solution_count']; } } //var_dump($solution_count); if ($project_stmt = $con->prepare($sql_project)) { $project_stmt->execute(); $project_rows = $project_stmt->fetchAll(PDO::FETCH_ASSOC); echo '<section id="solProj">'; foreach ($project_rows as $project_row) { $project_solution = $project_row['solution']; $project_img = $project_row['image']; $project_alt = $project_row['alt']; $project_img = '<img class="home-comment-profile-pic" src=" '. $project_img .'" alt="' . $project_alt .'">'; if ($solution_count === 0) { echo 'No projects found.'; } else { echo '<div class="projSlide">'; echo $project_img; echo '</div>'; } } echo '</section>'; }，适用于任何其他组件：

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

以下是我从视图中调用它的方式：

AjaxCaller

除IE 11（及更低版本）以外的任何浏览器都能正常工作。它甚至可以在Edge中运行 - 没有任何问题。

在IE中，我得到了

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

语法错误：......中的预期标识符

它甚至无法从<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>与mounted一起使用，因此所有内容都使用laravel-mix与Laravel进行编译，因此它与ES6无关。

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

Answer 1

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

IE11不支持解构。如果在IE11控制台中输入var {record} = {}之类的内容，您会看到同样的错误消息“预期标识符”。

尝试搜索原始错误消息中的已编译代码，然后查找单词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。

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

1 个答案: