How to apply style to specific element based on API response?

Question

Right now both of my selections are selected. I'm seeking a best way to only highlight only one based on the API response. Right now, the type = marketing. The right side should be selected. I'm more there are more than one day to do this.

I would addClass via Ajax via jQuery, but I don't know how to do this via Vue.js.

Can someone please give a hint ?

HTML

<v-row class="mb-6">
    <v-col md="6">
        <v-card outlined tile class="selection product" @click="selectCampaign('Product')">
            <v-row>
                <v-col md="1">
                    <v-btn class="ml-2 mt-3" fab icon x-large height="60px" right width="60px">
                        <v-icon>qr_code_scanner</v-icon>
                    </v-btn>
                </v-col>

                <v-col md="10">
                    <v-card-title outlined tile> Product </v-card-title>
                    <v-card-subtitle outlined tile>
                        Create campaigns for products with existing QR Codes.
                    </v-card-subtitle>
                </v-col>
            </v-row>
        </v-card>
    </v-col>

    <v-col md="6">
        <v-card outlined tile class="selection marketing" @click="selectCampaign('Marketing')">
            <v-row>
                <v-col md="1">
                    <v-btn class="ml-2 mt-3" fab icon x-large height="60px" right width="60px">
                        <v-icon>qr_code_2</v-icon>
                    </v-btn>
                </v-col>

                <v-col md="10">
                    <v-card-title outlined tile> Marketing </v-card-title>
                    <v-card-subtitle outlined tile>
                        Create campaigns and download QR Codes for marketing materials.
                    </v-card-subtitle>
                </v-col>
            </v-row>
        </v-card>
    </v-col>
</v-row>

CSS

.selection:not(.on-hover) {
    opacity: 0.9;
}

.marketing {
    opacity: 1;
    border: 3px solid #26a69a;
    background-color: #26a69a20;
}

.product {
    opacity: 1;
    border: 3px solid #e91e63;
    background-color: #e91e6320;
}

Answer 1

If I understand your requirement correctly, You want to make a cards selection dynamically based on the API response. If Yes, You can achieve that by class binding to manipulate an element's class.

I created below code snippet as per my understanding. Please let me know if any further changes required as per the requirement.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    selection: null
  }),
  mounted() {
    // API response
    this.selection = {
      product: false,
      marketing: true
    }
  },
})

.marketing {
    opacity: 1 !important;
    border: 3px solid #26a69a !important;
    background-color: #26a69a20 !important;
}

.product {
    opacity: 1 !important;
    border: 3px solid #e91e63 !important;
    background-color: #e91e6320 !important;
}

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
      <v-card :class="{ product: selection.product }">
        <v-card-title outlined tile> Product </v-card-title>
        <v-card-subtitle outlined tile>
          Create campaigns for products with existing QR Codes.
        </v-card-subtitle>
      </v-card>
      <br>
      <v-card :class="{ marketing: selection.marketing }">
        <v-card-title outlined tile> Marketing </v-card-title>
        <v-card-subtitle outlined tile>
          Create campaigns and download QR Codes for marketing materials.
        </v-card-subtitle>
      </v-card>
  </v-app>
</div>

Note : I added !important in the styles as we are overriding the cards default styles.