Invalid type error for tags

[kakulukia]

Overview of the problem

Buefy version: 0.9.23
Vuejs version: 2.6.14
OS/Browser: OSX / Chrome

Description

I wanted to try different tag types based on conditions. In this case i have a time table with bookable slots, reserved one and one selected item.

I used the following code to get this result:
b-tag(:type="{ 'is-primary': !isBooked(day, slot), 'is-light': !isSelected(slot, day) }") [[ slot.start]] - [[ slot.end ]]

But, even tho we see it working it is producing the following error:

Steps to reproduce

1. User a tag item with an object for its type rather than strings

Expected behavior

As objects already work, the above error should not be triggered.

Actual behavior

I see errors popping up AND Buefy accepting the object and rendering the type correctly.

I tried to set this CodePen template up, but it wasnt displaying Buefy CSS for me.
Anyway, this works for me as some test code:

<b-field><b-tag :type="{'is-primary': true}">test</b-tag><b-field>

And interestingly it is producing two error for this one tag item.

[wesdevpro]

@kakulukia can you please share a code pen. Thanks

[kakulukia]

Hi @wesdevpro ,

i had a second try to create a codepen, but have a look: its not executing as it should.

Could you please provide a working empty template?
Here is the test code anyway: https://codepen.io/kakulukia/pen/vYvPwBN

[wesdevpro]

Hi @wesdevpro ,

i had a second try to create a codepen, but have a look: its not executing as it should.

Could you please provide a working empty template? Here is the test code anyway: https://codepen.io/kakulukia/pen/vYvPwBN

Sure! It depends on what framework you are using. @kakulukia are you just using Buefy and vue2?
Interesting.

[kakulukia]

yes, buefy and vue2

[kikuomax]

@kakulukia You are right. type is passed to class attribute of <span>s in BTag:

buefy/src/components/tag/Tag.vue

Line 5 in 181e987

:class="[type, size, { 'is-rounded': rounded }]">

buefy/src/components/tag/Tag.vue

Line 41 in 181e987

:class="[type, size, { 'is-rounded': rounded }]">

It may be any object that class can accept. So I think we can safely declare type may be String or Object.