What is the process for updating the class of the target button?

Question

What is the process for updating the class of the target button?

I am new to using Vue and struggling to achieve a specific functionality. I have multiple buttons and I want to ensure that only one button can be selected at a time. Currently, I have tried implementing it with the following code:

:class="isActive ? 'on' : 'off'"
v-on:click ="isActive = !isActive"

However, this approach activates all buttons simultaneously. I realize that I need to somehow differentiate between the target button and the non-target ones but I'm unable to figure out how to do this. Can you provide me with some code examples on how to achieve this?

data() {
        return {
            isActive: true,
            color: ‘’,
        };
    },
<template>
      <div id="btn-box">
        <button
          type="button"
          class="btn off"
          @click="component='BorderLeftComonent', toggleShowPopup()">
          <div
            style="padding: 0 5px; width: 25px; margin: 0 auto; font-size: 25px;"
            :style="{ 'border-left': `4px solid ${color}` }">A</div>
        </button>
        <button
          type="button"
          class="btn off"
          @click="component='TextBalloonComponent'">
            <div
            class="bubble"
            style="margin: 0 auto; width: 25px; font-size: 25px;">A</div>
        </button>
        <button
          type="button"
          class="btn off"
          @click="component='DashedComponent'">
          <div
            style="border: 4px dashed #f5d018; margin: 0 auto; width: 45px; font-size: 25px;">A</div>
        </button>
      </div>
</template>

javascript vue.js

Answer 1

Answer №1

Incorrect Syntax:

:class="isActive ? 'on' : 'off'"
v-on:click ="isActive = !isActive"

Corrected Syntax (using shorthand method):

:class="{ 'on': isActive, 'off': !isActive }"
@click="isActive = !isActive"

Alternatively, you can use this syntax and refer to the example below:

:class="{ 'on': isActive, 'off': !isActive }"
@click="toggle"

Implement the @click event toggle within the methods section like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- these buttons have `:class` binding and `@click` event -->
  <button :class="{ 'on': isActive, 'off': !isActive }" @click="isActive = !isActive">Toggle</button> OR
  <button :class="{ 'on': isActive, 'off': !isActive }" @click="toggle">Toggle</button> OR

  <!-- these buttons just have `@click` event -->
  <button @click="isActive = !isActive">Toggle</button> OR
  <button @click="toggle">Toggle</button> OR

  <!-- these buttons do not (have class and event binding) do anything -->
  <button>Toggle</button> OR
  <button>Toggle</button>

  <p v-if="isActive">{{ message }}</p>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      isActive: true,
    },
    methods: {
      toggle() {
        this.isActive = this.isActive ? false : true
      }
    },
  })
</script>

<style scoped>
  /*add some basic styling for your classes*/
  
  button {
    padding: 0.5em;
    border-radius: 5px;
    color: hsl(205, 46.5%, 73.5%);
    background-color: hsl(205, 14%, 28%);
  }
  
  .on {
    color: green;
  }
  
  .off {
    color: red;
  }
</style>

Answer 2

Incorrect Syntax:

:class="isActive ? 'on' : 'off'"
v-on:click ="isActive = !isActive"

Corrected Syntax (using shorthand method):

:class="{ 'on': isActive, 'off': !isActive }"
@click="isActive = !isActive"

Alternatively, you can use this syntax and refer to the example below:

:class="{ 'on': isActive, 'off': !isActive }"
@click="toggle"

Implement the @click event toggle within the methods section like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- these buttons have `:class` binding and `@click` event -->
  <button :class="{ 'on': isActive, 'off': !isActive }" @click="isActive = !isActive">Toggle</button> OR
  <button :class="{ 'on': isActive, 'off': !isActive }" @click="toggle">Toggle</button> OR

  <!-- these buttons just have `@click` event -->
  <button @click="isActive = !isActive">Toggle</button> OR
  <button @click="toggle">Toggle</button> OR

  <!-- these buttons do not (have class and event binding) do anything -->
  <button>Toggle</button> OR
  <button>Toggle</button>

  <p v-if="isActive">{{ message }}</p>
</div>

<script>
  let app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue.js!',
      isActive: true,
    },
    methods: {
      toggle() {
        this.isActive = this.isActive ? false : true
      }
    },
  })
</script>

<style scoped>
  /*add some basic styling for your classes*/
  
  button {
    padding: 0.5em;
    border-radius: 5px;
    color: hsl(205, 46.5%, 73.5%);
    background-color: hsl(205, 14%, 28%);
  }
  
  .on {
    color: green;
  }
  
  .off {
    color: red;
  }
</style>

Answer 3

Answer №2

Implement the v-for directive to loop through an array of button objects, each containing its own isActive property that can be toggled using the onclick event.

<button
      v-for="(button, index) in buttons"
      :key="index"
      :class="button.isActive ? 'on' : 'off'"
      @click="button.isActive = !button.isActive"
    >
      <div :class="`btn btn-${button.type}`">{{ button.label }}</div>
</button>

data() {
    return {
       buttons: [
        {
          label: "A",
          isActive: false,
          type: "border-left",
        },
        {
          label: "B",
          isActive: false,
          type: "text-balloon",
        },
        {
          label: "C",
          isActive: false,
          type: "dashed",
        },
      ],
    };
  }

<style scoped>
.btn {
  padding: 0 5px;
  width: 25px;
  margin: 0 auto;
  font-size: 25px;
}
.btn-border-left {
  border-left: 4px solid #f55;
}
.btn-dashed {
  border: 4px dashed #f5d018;
  width: 45px;
}
</style>

Answer 4

Implement the v-for directive to loop through an array of button objects, each containing its own isActive property that can be toggled using the onclick event.

<button
      v-for="(button, index) in buttons"
      :key="index"
      :class="button.isActive ? 'on' : 'off'"
      @click="button.isActive = !button.isActive"
    >
      <div :class="`btn btn-${button.type}`">{{ button.label }}</div>
</button>

data() {
    return {
       buttons: [
        {
          label: "A",
          isActive: false,
          type: "border-left",
        },
        {
          label: "B",
          isActive: false,
          type: "text-balloon",
        },
        {
          label: "C",
          isActive: false,
          type: "dashed",
        },
      ],
    };
  }

<style scoped>
.btn {
  padding: 0 5px;
  width: 25px;
  margin: 0 auto;
  font-size: 25px;
}
.btn-border-left {
  border-left: 4px solid #f55;
}
.btn-dashed {
  border: 4px dashed #f5d018;
  width: 45px;
}
</style>

Answer 5

Answer №3

If you are looking for a button group, a common component in UI libraries, check out this one at this link.

As an illustration, the example below showcases 4 buttons aligned next to each other, with each button getting highlighted upon clicking, as shown in the GIF provided.

https://i.stack.imgur.com/fg1la.gif

In your code snippet, there is a property (named "text" in this case) that indicates which button is currently selected. Here's a snippet borrowed from the aforementioned link:

<v-btn-toggle
    v-model="text"
    tile
    color="deep-purple accent-3"
    group
  >
    <v-btn value="left">
      Left
    </v-btn>

    <v-btn value="center">
      Center
    </v-btn>

    <v-btn value="right">
      Right
    </v-btn>

    <v-btn value="justify">
      Justify
    </v-btn>
  </v-btn-toggle>

Hope this addresses your query effectively!

Answer 6

If you are looking for a button group, a common component in UI libraries, check out this one at this link.

As an illustration, the example below showcases 4 buttons aligned next to each other, with each button getting highlighted upon clicking, as shown in the GIF provided.

https://i.stack.imgur.com/fg1la.gif

In your code snippet, there is a property (named "text" in this case) that indicates which button is currently selected. Here's a snippet borrowed from the aforementioned link:

<v-btn-toggle
    v-model="text"
    tile
    color="deep-purple accent-3"
    group
  >
    <v-btn value="left">
      Left
    </v-btn>

    <v-btn value="center">
      Center
    </v-btn>

    <v-btn value="right">
      Right
    </v-btn>

    <v-btn value="justify">
      Justify
    </v-btn>
  </v-btn-toggle>

Hope this addresses your query effectively!

What is the process for updating the class of the target button?

Answer №1

Answer №2

Answer №3

Similar questions

Darkness prevails even in the presence of light

What is the best way to gather Data URI content through dropzone.js?

Increasing values in Mongoose using $inc can be done by following these steps

Bring in Bootstrap and the Carousel plugin using Webpack Encore

Utilize Node.js driver to export a Mongo collection into a JSON file

Exploring the world of Typescript and Angular Filter functionalities

Communication between the Node development server and the Spring Boot application was hindered by a Cross-Origin Request

What is the best way to transfer the content from a tinyMCE textarea editor to an inner controller using Symfony3 and Ajax

Exploitable Weakness Found in NestJS Version 8.4.5

Selection auto-closing feature

Animation failing to be queued properly

Sharing methods between controllers in AngularJS

How can you call a function in ExpressJS that is located in a different file?

The HTML table inexplicably displays a random comma out of nowhere

What is the best way to integrate a PHP page with its own CSS and JavaScript into a Wordpress page?

Electron.js issue: ipcRenderer and ipcMain leading to a white screen problem

'AngularJS' filtering feature

Manipulate the presence of THREE.Points in a three.r84 scene by adding or removing them

Exploring the functionality of the JavaScript Date constructor in relation to

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on