Changing q-card bg-color using methods

[asaf097]

hey devs

i try to create q-btn to change my q-card background color using method which return string of the background color class using v-bind on class i try few things didn’t work
i know is easy maybe i am just stuck

      <q-card-section  class="bg-indigo-3 text-black text-center" :class="changeColor" >

      <q-card-section  class="bg-indigo-3 text-black text-center" :class="{changeColor ? changeColor : 'bg-indigo-4'" >

this is buttons try ( i had more)

 changeColor() {
      const arrayColors = [
        'bg-lime-4', 'bg-light-green-4', 'bg-teal-3', 'bg-indigo-4', 'bg-red-5',
        'bg-deep-orange-5', 'bg-orange-5', 'bg-amber-4', 'bg-blue-grey-4', 'bg-brown-5',
        'bg-purple-3', 'bg-pink-4', 'bg-cyan-3'
      ]
      const randomNumber = Math.floor(Math.random() * (13 - 1) + 1);
      console.log(arrayColors[randomNumber])
      debugger

      return arrayColors[randomNumber]
      // return { 'bg-primary': true }

    }

and here you can see the method

you can i try return many ways!
thanks for help!

[metalsadman]

@asaf097 you already have a static class setting the bg.

[asaf097]

@metalsadman i try that before i didnt help

[metalsadman]

@asaf097 please make a codepen.