Add active class on @click on button when current is active

7 days ago I've started working with Vue.js I have this simple App where I am listing jobs and having 4 filters with a handleClick function to filter on location, salary, company, and title.

Now I am trying to understand how can I add an active class using the Composition API in Vue?

I know how to do this same in React perfectly fine, but wondering how this is done with Vue.

Code:

<template>
  <div >
    <header>
      <div >
        <button @click="orderByTerm('title')">Order by title</button>
        <button @click="orderByTerm('salary')">Order by salary</button>
        <button @click="orderByTerm('location')">Order by location</button>
        <button @click="orderByTerm('company')">Order by company</button>
      </div>
    </header>
    <JobList :jobs="jobs" :order="order" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

import JobList from "./components/JobList.vue";

import Job from "./types/Job";
import OrderTerm from "./types/OrderTerm";

import AllJobs from "./data/jobs";

export default defineComponent({
  name: "App",
  components: { JobList },
  setup() {
    const jobs = ref<Job[]>(AllJobs);

    const order = ref<OrderTerm>("title");

    const orderByTerm = (term: OrderTerm) => {
      order.value = term;
    };

    return { jobs, orderByTerm, order };
  },
});
</script>

CodePudding user response：

Did you try to bind class:

<button @click="orderByTerm('company')" :>
...