[Vuejs]-Random background color on vuejs loop

by

-1👍

✅

If you want custom styles on the different contract types, you can d a method:

/*
 * @param {string} contract -- a foo bar
 * @return {object} -- Bunch of boolean controlled classes
 */
getContractClasses (contract)
{
  return {
    'style1': contract === 'a string',
    'style2': contract === 'another thing',
    'style3': true, // This one is always going to be on and will have a bunch of shared styles between all of them
  }
},

Then, in the template, 

<h3 :class="getContractClasses(contract)">

Finally, just do the different styles in the style guide in the component housing the v-for.

Also, might I suggest an unwritten rule of sorts to remove all the logic from the template layer, and have that as a method or computed? Reading that long ternary inline is a big “No thank you”, from me.

👤T.Woody

Leave a comment