CODEWITHSUNDEEP
vue.jsvuejs2
Nayereh Rasuli
Nayereh Rasuli

Reputation: 216

The style doesn't apply when adding new class in vue.js

I am self-studying Vue.js. I am using v-bind to add the highlight class to the span element, which is supposed to add newBorder style to the element, but the style doesn't get applied.

<!DOCTYPE HTML>
<html>

<head>
    <title>Intro to v-bind</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .container {
            background: #cecece;
        }
        .newBorder {
            border: 5px solid yellow;
        }
    </style>
</head>

<body>

    <div id="app">

        <img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
        <span v-bind:class="{loadClass,highlight}">
            look at me!
        </span>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loadClass: 'container',
                highlight: 'newBorder'
            }
        });
    </script>
</body>

</html>

Appreciate it if you can point out my mistake. Thanks

Upvotes: 4

Views: 855

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Just change the class binding the array syntax instead of object :

 <span v-bind:class="[loadClass,highlight]">


<!DOCTYPE HTML>
<html>

<head>
    <title>Intro to v-bind</title>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .container {
            background: #cecece;
        }
        .newBorder {
            border: 5px solid yellow;
        }
    </style>
</head>

<body>

    <div id="app">

        <img v-bind:src="'assets/images/look.jpg'" v-bind:alt="'illustration of the word -Look-'" v-bind:title="'Look'">
        <span v-bind:class="[loadClass,highlight]">
            look at me!
        </span>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                loadClass: 'container',
                highlight: 'newBorder'
            }
        });
    </script>
</body>

</html>

Upvotes: 2

Related Questions