Using Vue to toggle an active HTML class on click: A tutorial

Question

Using Vue to toggle an active HTML class on click: A tutorial

Can someone assist me with this code snippet that is intended to toggle a class using a Vue on-click event? I'm encountering issues as it's not working and I'm seeing several errors in the console. Any help would be appreciated.

<div id="app5">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>

    <div
            v-bind:class="{available: value}"
            v-on:click="available = !available">
        <span>Click</span>

    </div>
</div>
 

var app5=new Vue({
    el:'#app5',
    data:{
        value: true,
        nearby:false
    }
});

sylesheet

  span{
        background:red;
        color: #fff;
    }

    .available span{
        background: green;
    }

My expectation is for the span background to be initially green and then change to red after being clicked.

css vue.js

Answer 1

Answer №1

Within your click event function, you're attempting to toggle the variable named available, which happens to be the name of your CSS class. To correctly bind classes, you should use the syntax

v-bind:"{classtotoggle: variable}"

.

Therefore, your code should look like this:

<div v-bind:class="{available: value}" v-on:click="value = !value">
  <span>Click</span>
</div>

As a helpful hint, it's advisable to always use a function to manage events with the v-on directive as it allows for easier addition of functionalities in the future.

Hope this guidance proves to be beneficial,

Answer 2

Within your click event function, you're attempting to toggle the variable named available, which happens to be the name of your CSS class. To correctly bind classes, you should use the syntax

v-bind:"{classtotoggle: variable}"

.

Therefore, your code should look like this:

<div v-bind:class="{available: value}" v-on:click="value = !value">
  <span>Click</span>
</div>

As a helpful hint, it's advisable to always use a function to manage events with the v-on directive as it allows for easier addition of functionalities in the future.

Hope this guidance proves to be beneficial,

Answer 3

Answer №2

To change the value when clicked, use v-on:click="value = !value" as shown in the code snippet below.

var app5 = new Vue({
    el:'#app5',
    data:{
        value: true,
        nearby:false
    }
});

span{
        background:red;
        color: #fff;
    }

    .available span{
        background: green;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app5">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>

    <div
            v-bind:class="{available: value}"
            v-on:click="value = !value">
        <span>Click</span>

    </div>
</div>

Answer 4

To change the value when clicked, use v-on:click="value = !value" as shown in the code snippet below.

var app5 = new Vue({
    el:'#app5',
    data:{
        value: true,
        nearby:false
    }
});

span{
        background:red;
        color: #fff;
    }

    .available span{
        background: green;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app5">
    <h1>Dynamic CSS</h1>
    <h2>Example 1</h2>

    <div
            v-bind:class="{available: value}"
            v-on:click="value = !value">
        <span>Click</span>

    </div>
</div>

Using Vue to toggle an active HTML class on click: A tutorial

sylesheet

My expectation is for the span background to be initially green and then change to red after being clicked.

Answer №1

Answer №2

Similar questions

I am experiencing difficulties with getting Google Analytics to function properly within my VuePress project

How can you navigate to different pages in Chrome by selecting radio buttons that are designed as clickable

Vue js external data model

In Vue js, a continuous function is executed to check the user's current online or offline status

Troubleshooting Vue Router Loading Problem

The positioning attribute and flexible height in CSS are essential for creating dynamic

Tips for retrieving console data in VueJS Data

Guide to activating a watcher once the page finishes loading

Table borders not displaying properly in Chrome when cells are hidden

Managing key presses with functions in VueJs

Formatting text over an image

Issues with padding and margin on iOS devices

Can you provide guidance on aligning text in a text area to the center?

Center element horizontally at a specified breakpoint and below

Issue with scrolling to the bottom of collapsed sections in Bootstrap

Alignment Woes in Bootstrap Designs

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

Collect data from website submissions via email

Customize the yellow background color of Safari's autofill feature by following these simple

I'm having trouble with my tablet view taking priority over my desktop view - what could be causing this issue?