vue flowbite error [vue/no-parsing-error] Parsing error: unexpected-character-in-unquoted-attribute--CodePudding

I'm giving it a try for flowbite-vue and I'm having this eslint unexpected character problem in VS-Code,

[vue/no-parsing-error]
Parsing error: unexpected-character-in-unquoted-attribute-value.eslint-plugin-vue

Unquoted attribute value cannot contain U 0022 ("), U 0027 ('), U 003C (<), U 003D (=), and U 0060 (`).vue(18)

the component Navbar has a dropdown and the label={Avatar.. is showing this error

<Dropdown
  arrowIcon={true}
  inline={true}
  label={Avatar alt="User settings" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded={true}/>}
>

has anyone came through this and fixed it? thanks in advance for the help.

CodePudding user response：

You probably meant this in Vue's realm

<Dropdown
  arrow-icon
  inline
  label="Avatar alt='User settings'" 
  img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" 
  rounded
/>

rounded assumes it's actually :rounded="true" but we can make it shorter that way.
Please also notice the semi-colon : which is a shorthand for v-bind:, needed when you need to interpolate what is inside of the double quotes (like an object).

Which is not the case in your situation: you use only strings.

More details available here: https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings