[Vuejs]-Why is instead of the Vue component some JS comment added to the DOM?

by

0👍

✅

I fixed the problem by going at it in another way. Vue re-renders v-for tags when using a key attribute (:key="card.id"). So I don’t try to manually create the components anymore but make use of this feature and modify the cards data instead, which in turn then makes Vue re-render the deleted/modified/added cards:

Updated jsfiddle with my solution 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);
});

Leave a comment