[Vuejs]-How to call method with parameters inside, from an html element with v-bind:class in Vue.js?

by

0👍

✅

If addNewClass needs parameters then addNewClass should be a method and not a computed.

computed should not have parameters. (They technically can, but don’t bother here.)

In your case the code should be:

const app = Vue.createApp({
  data() {
    return {
      boxASelected: false,
      boxBSelected: false,
      boxCSelected: false,
    };
  },

  methods: {
    addNewClass(box) {
      if (box === 'A') {
        return {active: this.boxASelected};
      } else if (box === 'B') {
        return {active: this.boxBSelected};
      } else if (box === 'C') {
        return {active: this.boxCSelected};
      }
    },
    boxSelected(box) {
      if (box === 'A') {
        this.boxASelected = !this.boxASelected;
      } else if (box === 'B') {
        this.boxBSelected = !this.boxBSelected;
      } else if (box === 'C') {
        this.boxCSelected = !this.boxCSelected;
      }
    },
  },
});

app.mount('#styling');

Leave a comment