Question

我有一个与vue cli build一起使用的vue组件作为Web组件，我想在由django生成的网站页面中使用它。我使用Material Design Bootstrap来设置页面样式，并且可以正常工作。但是当我包括我的vueJS组件时，它工作正常，但他没有样式。

实际结果： https://i.imgur.com/4SiO7g6.png

预期： https://i.imgur.com/LUhOsIk.png

component.vue

<style>
<!--I have no style on my component-->
</style>

<!--Styles is applied by class in template section-->
<template>
    <div id="survey">
        <div id="survey_ended" v-if="this.ended">
            <div class="card-text">temps restant : terminé</div>
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th scope="col">Choix</th>
                    <th scope="col">Votes</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="choice in this.survey.nightmaresurveypropositions" :key="choice.id">
                    <td>{{ choice.name }}</td>
                    <td>{{ choice.votes.length }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

base.html


<head>
    <!-- I include my style on the base page of my django app -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>{% block title %}{% endblock %}</title>
    <!-- Font Awesome -->
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="{% static 'css/mdb.min.css' %}" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet"
          href="{% static 'css/base.css' %}">
    {% block css %}{% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

page.html

<!-- And i use my bundled component in my page -->
<nightmare-nightmare-part-survey
                                    id="{{ part.nightmaresurvey.id }}"
                                    end_date="{{ part.nightmaresurvey.get_end_time|date:"Y-m-d\TH:i:s" }}"></nightmare-nightmare-part-survey>

捆绑的Vue组件不要使用我的网站CSS

0 个答案: