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

Question

I want to call the method via v-bind:class from vue-js script that should add a css class to a div section in my project. I can call the method without any error if I pass no parameters inside the syntax. But when I include a parameter inside the syntax, it displays error in the console and the page crashes.

This is the script that I am using:

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

  computed: {
    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};
      }
    },
  },

  methods: {
    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');

and, here is the html code:

<section id="styling">
      <div
        class="demo"
        :class="addNewClass('A')"
        @click="boxSelected('A')"
      ></div>
      <div
        class="demo"
        :class="addNewClass('B')"
        @click="boxSelected('B')"
      ></div>
      <div
        class="demo"
        :class="addNewClass('C')"
        @click="boxSelected('C')"
      ></div>
    </section>

In the above html code it i call the function using the code :class="addNewClass", it works perfectly fine. But when I use the same code with parameter such that :class="addNewClass('A')", the page crashes and the console generates an error. The question is, how can I call a vue function from html code with v-bind:class="" attribute?

I was trying to add a new css class to div element via v-bind:class attribute from vueJS by calling a function from VueJS script. It is working find when I pass no parameters while calling the function. But when I pass a parameter it generates an error.

Answer 1

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');