[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

[ZuidRuud]

Hello,

Thanks for this package, we had a client who wanted a wheel that would rotate, and after alot of searches this was the package we chose so thanks in advance.

However we're running into a issue: "[Vue warn]: Avoid using non-primitive value as key, use string/number value instead." Normally this refers to a v-for related issue (I think?) but we're not using v-for.

<spin-wheel v-slot="{ angle }">
      <spin-circle :items="items" :gravity="hasGravity">
        <template v-slot:bubble="{ item }">
          <spin-item :rotation="angle" class="bubble">
            <img v-bind:src="item.icon" v-bind:alt="item.alt" />
            <a v-bind:href="item.link">
              <span class="item-label">{{ item.text }}</span>
            </a>
          </spin-item>
        </template>
      </spin-circle>
    </spin-wheel>

As you can see we're passing items as a prop to the component you developed. Our items data attribute looks like this:

data: function () {
    return {
      items: [
          { text: 'Track & Trace predictive ETA', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/track-and-trace.svg', alt: 'Track & Trace predictive ETA' },
          { text: 'Transport management solutions', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/transport-management-solutions.svg', alt: 'Transport management solutions' },
          { text: 'Carrier management', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/carrier-management.svg', alt: 'Carrier management' },
          { text: 'Data science, analytics & interactive dashboards', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/data-science.svg', alt: 'Data Science' },
          { text: 'Tender management', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/tender-management.svg', alt: 'Tender Management' },
          { text: 'E-CMR', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/e-cmr.svg', alt: 'E-CMR' },
          { text: 'Freight audit & pay', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/freight.svg', alt: 'Freight audit & pay' },
          { text: 'Optimization & continuous improvement', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/optimization-continuous-improvement.svg', alt: 'Optimization & continuous improvement' },
          { text: 'Dock scheduling', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/dock-scheduling.svg', alt: 'Dock scheduling' },
          { text: 'Supplier portal carrier portal customer portal', icon: '/wp-content/themes/ids/dist/images/svg/spinwheel/supplier-portal.svg', alt:'Supplier portal carrier portal customer portal' },
        ],
      hasGravity: true,
      index: 0,
      isVisible: false,
      counter: 0,
    };
  },

Do you have any idea on how to fix this bug?

Thanks,

Ruud

[Kapcash]

Hi! I'll take a look and coming back to you asap! :)

[ZuidRuud]

Woah, didn't expect a response that soon. Much appreciated kind sir! If you need any more info i'd gladly help :)

[Kapcash]

Hahaha yeah, I'm just so glad someone wants to use this package to be honest 😆 I couldn't let you down!

I just published the version v1.1.0 which provides a new prop on SpinItem: itemKey. It allows you to specify which attribute from your item objects to use within the v-for the component uses internally.

Also, it defaults to the item index now, so it won't ever fail again :)

<spin-wheel v-slot="{ angle }">
  <spin-circle :items="items" :gravity="hasGravity">
    <template v-slot:bubble="{ item }">
      <spin-item :rotation="angle" class="bubble" item-key="text"> <!-- or just don't specify it, it will work too -->
        <img v-bind:src="item.icon" v-bind:alt="item.alt" />
        <a v-bind:href="item.link">
          <span class="item-label">{{ item.text }}</span>
        </a>
       </spin-item>
     </template>
   </spin-circle>
</spin-wheel>

Try that new version and tell me if it's better!

---

Also, please note that the container of the SpinWheel requires a specific height otherwise it won't compute correctly the circle size. I'll work on that later so it's easier to use :)

[ZuidRuud]

You sir, are a champ! Thanks alot!

[ZuidRuud]

In case you were wondering why we used your package: Some client wanted a wheel of icons on their website, and all the other spinning wheel libraries we could find were those wheel's of fortune:

[Kapcash]

Yeah, I needed that kind of dragging wheel before too, so I research a component and, like you, only find wheel's of fortune... So I started working on that component myself haha

It's not perfect, but it works! I wish I could implement a movement inertia when you stop dragging the wheel, but didn't found the right solution yet.

Let me know if you still have that warning with the new version! I'll let you close the Issue :)

[ZuidRuud]

It works pretty damn good! We're still fiddling with a starting animation which is quite a pain but we'll figure it out. Console errors are gone!