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

根据样式标签上的scoped属性，您的css还将自动被限定为该组件实例。

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

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

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

Answer 2

在与Jest进行单元测试时，我遇到了这个错误。

下面的这段代码在App.vue的单元测试期间引发了错误：

〜/ app.js

import App from '~/components/App.vue';

const app = new Vue({
    el: '#app',
    router,
    store,
    ...App,
});

〜/ components / App.vue

export default {
    el: '#app', // remove this to fix a redundant-declaration error

    // ...
}

解决方案是删除el中的冗余App.vue声明。回想起来，这是有道理的，因为el被声明了两次，而第二次是通过...App,将组件散布到app.js中的新应用程序中（注意：app.js首先运行关于时间）。

就我而言，这并不是立即显而易见的，因为散布操作使冗余声明变得模糊。需要分析两个文件才能看到它。

该应用程序确实可以正常工作，但Jest在单元测试期间捕获了该错误。

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

2 个答案: