错误 [Vue 警告]：选项“el”只能在实例创建期间使用 `new` 关键字使用

Question

我有以下缩写的 vue 组件：

    <template>
    <section>
        <v-card class="mx-auto" color="#26c6da" dark max-width="1200">
        <v-carousel >
            <v-carousel-item v-for="(item,i) in items" :key="i" v-html="item.content"> </v-carousel-item>
        </v-carousel>
        </v-card>
    </section>
    </template>


    <script>
    ...........................
    console.log(res);
    export default {
        el: '#app',
        data: function() {
        return {
            items: res
        };
        }
    };
    </script>

    <style scoped>
    #app iframe {
        width: 100%;
        height: 500px;
    }
    </style>

我想在底部添加css来控制轮播外观。为此，我尝试声明 'el' 属性并将 css 挂在其上。我收到标题中的错误。我该如何解决？

Answer 1

您不需要el: '#app',在您的组件中。这仅在启动新的 Vue 应用程序时使用。

此外，您的 css 将根据 style 标签上的 scoped 属性自动将范围限定为该组件实例。

如果 Iframe 嵌套在另一个组件中，您将需要使用深度选择器：

<style scoped>
    /deep/ iframe {
        width: 100%;
        height: 500px;
    }
</style>

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors