为什么将某些JS注释代替Vue组件添加到DOM？

问题描述 投票：0回答：1

我正在使用BootstrapVue，并尝试在用Vue渲染网站（以后我想在生成过程中使用异步数据）并将其添加到DOM后，动态创建组件。

（（通过在页面加载后以1秒的延迟创建组件，正在模拟演示中的异步性。

这会发生：Vue正在创建组件，然后将它们安装到DOM。但是可惜他们没有露面。而是使用以下注释：<!--function(e,n,r,i){return Pt(t,e,n,r,i,!0)}-->被添加到它们的DOM中（尽管在正确的位置），而不是组件的实际HTML代码。

这是带有示例代码的jsfiddle，它演示了该问题：https://jsfiddle.net/0stdxorj/1

感谢您的帮助：）。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>Test</title>
    <!-- Bootstrap Core CSS -->
    <link
            type="text/css"
            rel="stylesheet"
            href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
    />
    <!-- Bootstrap Vue CSS -->
    <link
            type="text/css"
            rel="stylesheet"
            href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
    />
    <!-- Custom CSS -->
    <link href="../vrc/vrc.css" rel="stylesheet">

    <!-- Using: https://bootstrap-vue.org/ -->
    <!-- Load polyfills to support older browsers -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
    <!-- Vue JS -->
    <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
    <!-- Bootstrap Vue JS -->
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
    <!-- Portal Vue JS -->
    <script src="https://unpkg.com/portal-vue@latest/dist/portal-vue.umd.min.js"></script>
    <!-- Popper JS -->
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <!-- VCalendar JS -->
    <script src='https://unpkg.com/v-calendar'></script>
</head>
<body>
<div id="app">
    <!-- Application root element -->
    <b-container fluid="xl">

        <b-row align-h="center" align-v="start" id="card-container">
            <!-- Card Inline Template -->
            <card inline-template id="card-template">
                <b-card
                        v-bind:title=card.title
                        img-src="https://picsum.photos/600/300/?image=25"
                        img-alt="Image"
                        img-top
                        style="max-width: 370px; margin: 5px"
                        class="no-select"
                >
                    <b-button v-b-toggle="'collapse-' + card.id">Button</b-button>
                    <b-collapse v-bind:id="'collapse-' + card.id" class="mt-2">
                        <v-calendar
                                is-expanded
                                :min-date='new Date()'
                        >
                        </v-calendar>
                    </b-collapse>
                </b-card>
            </card>
        </b-row>

    </b-container>
</div>
</body>
</html>

const vue = new Vue({
    el: '#app'
})

const cardComponentConstructor = Vue.extend({
    props: {
        card: {
            required: true,
            default: {id: 0, title: 'Default.'}
        }
    },
    template: '#card-template',
    mounted() {
        alert("mounted " + this.card.id + " " + this.card.title)
    },
    created() {
        //alert("created " + this.card.id + " " + this.card.title)
    }
});

window.addEventListener("load", function(event) {
    setTimeout(function () {
        createCard({propsData: {card: {id: 0, title: '0'}}})
        createCard({propsData: {card: {id: 1, title: '1'}}})
    }, 1000);
});

function createCard(props) {
    let componentInstance = new cardComponentConstructor(props)
    componentInstance.$mount()
    document.getElementById("card-container").appendChild(componentInstance.$el)
}
vue.js vue-component bootstrap-vue
1个回答
0
投票

我通过另一种方式解决了这个问题。当使用v-for属性（key）时，Vue重新提供:key="card.id"标签。因此，我不再尝试手动创建组件，而是利用此功能并修改cards数据，这反过来又使Vue重新呈现已删除/修改/添加的卡：

使用我的解决方案更新了jsfiddle https://jsfiddle.net/t7k49a2n/

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>Test</title>
    <!-- Bootstrap Core CSS -->
    <link
            type="text/css"
            rel="stylesheet"
            href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
    />
    <!-- Bootstrap Vue CSS -->
    <link
            type="text/css"
            rel="stylesheet"
            href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
    />
    <!-- Custom CSS -->
    <link href="../vrc/vrc.css" rel="stylesheet">

    <!-- Using: https://bootstrap-vue.org/ -->
    <!-- Load polyfills to support older browsers -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
    <!-- Vue JS -->
    <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
    <!-- Bootstrap Vue JS -->
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
    <!-- Portal Vue JS -->
    <script src="https://unpkg.com/portal-vue@latest/dist/portal-vue.umd.min.js"></script>
    <!-- Popper JS -->
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <!-- VCalendar JS -->
    <script src='https://unpkg.com/v-calendar'></script>
</head>
<body>
<div id="app">
    <!-- Application root element -->
    <b-container fluid="xl">

        <b-row align-h="center" align-v="start">
            <!-- Card Inline Template -->
            <card
                  inline-template
                  v-for="card in cards"
                  v-bind="{card: card}"
                  :key="card.id"
            >
                <b-card
                        v-bind:title=card.title
                        img-src="https://picsum.photos/600/300/?image=25"
                        img-alt="Image"
                        img-top
                        style="max-width: 370px; margin: 5px"
                        class="no-select"
                >
                    <b-button v-b-toggle="'collapse-' + card.id">Button</b-button>
                    <b-collapse v-bind:id="'collapse-' + card.id" class="mt-2">
                        <v-calendar
                                is-expanded
                                :min-date='new Date()'
                        >
                        </v-calendar>
                    </b-collapse>
                </b-card>
            </card>
        </b-row>

    </b-container>
</div>
</body>
</html>

Vue.component('card', {
    props: {
        card: {
            required: true,
            default: {id: 0, title: 'Default.'}
        }
    }
});

window.app = new Vue({
    el: '#app',
    data: {
        cards: []
    }
})

window.addEventListener("load", function(event) {
    setTimeout(function () {
        window.app.cards.push({id: 0, title: '1'})
    }, 1000);
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.