NuxtN
Nuxt•12mo ago
Revadike

Responsive component property racing pinia store

I'm absolutely banging my head on this. I have the following.

  const { inLibrary, inWishlist, inBlacklist, inTradelist } = useCollectionsStore(); // pinia store actions
  const getRowClass = item => {
    return {
      'app-row': true,
      'in-library': inLibrary(item.appid),
      'in-wishlist': inWishlist(item.appid),
      'in-blacklist': inBlacklist(item.appid),
      'in-tradelist': inTradelist(item.appid)
    };
  };



/*
<v-data-table
    :items="items"
    :row-props="(item) => ({ class: getRowClass(item) })"
/>
*/


I can't get row props to work properly. It adds the app-row class to each row, but nothing else. I've tested the getRowClass function separately and it works fine. I suspect a race condition: getRowClass is called before pinia is initialized. And since its not responsive, it won't be corrected later. Is there perhaps any way to make this responsive? I've tried many ways but failed... the main issue is it needs the context of item to work.
Was this page helpful?