Vue-carousel: Bug: Invalid character: '#' in :pagination-active-color

[koddr]

Hello.

I have a bug with pagination-active-color attribute. My code is:

<carousel :per-page="1" :pagination-enabled="true" :pagination-active-color="#5b96fb">
  <slide>1</slide>
  <slide>2</slide>
  <slide>3</slide>
</carousel>

And console show me:

- invalid expression: Invalid character: '#' in

    #5b96fb

  Raw expression: :pagination-active-color="#5b96fb"

How to solve it?

[quinnlangille]

That's a tricky one, as you seem to be doing this exactly right. Here is a demo of it working in the same way you've written above:

https://jsfiddle.net/ckd1vysd/5/

Maybe try and copy this code exactly into your application and move backward until you can either fix or recreate the problem. If you find that it's an actual bug, post back here and I'll open a bug request! I'd also like to hear about the fix if and once you get it working :~)

[delta9]

@koddr Try

<carousel paginationColor="#d8d8d8" paginationActiveColor="#00d1b2" :perPage="1">

[mkegoldberg]

I had the same issue but removing the colon worked for me

[quinnlangille]

Hey good find guys, I'll flag this as a bug request and see if we can get it resolved :~)

[jwmx]

Try use single quotes inside.

<carousel :pagination-active-color="'#5b96fb'">

Otherwise it is not resolved as a string.

[quinnlangille]

Hey, @jwmx good point! I'll take that as a solution and close this issue. Feel free to open a new issue or comment here if anyone still has any problems :octocat: