Fullstack Vue - App Stage final

scrimba

Watch in fullscreen

by Menno

About

Comments

Notes

Fullstack Vue - App Stage final

by Menno

Expand for more info

index.html

run

preview

console

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="app">
            <h2 class="title has-text-centered dividing-header">UpVote!</h2>
            
            <div class="section">
                <article v-for="submission in sortedSubmissions"
                    :key="submission.id"
                    class="media"
                    :class="{ 'blue-border': submission.votes >= 20 }">
                    <submission-component
                        :submission="submission"
                        :submissions="sortedSubmissions">
                    </submission-component>
                </article>
            </div>
        </div>

        <script src="https://unpkg.com/vue"></script>
        <script src="./seed.js"></script>
        <script src="./index.pack.js"></script>
    </body>
</html>

<html>

<head>

href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">

</head>

<body>

<h2 class="title has-text-centered dividing-header">UpVote!</h2>

<article v-for="submission in sortedSubmissions"

:key="submission.id"

class="media"

:class="{ 'blue-border': submission.votes >= 20 }">

<submission-component

:submission="submission"

:submissions="sortedSubmissions">

</submission-component>

</article>

</div>

</body>

</html>

›

"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"

LIVE