javascript - 错误 [Vue 警告] : option "el" can only be used during instance creation with the `new` keyword

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 应用程序时使用。

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

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

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

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