Vue-multiselect: Can't set placeholder to prop

[zachleigh]

I'm trying to do something like this:

<multiselect
    :selected.sync="selected"
    :show-labels="false"
    :options="languages"
    placeholder="languagePlaceholder"
></multiselect>

Where languagePlaceholder is a component prop. I tried placeholder="languagePlaceholder" and placeholder="{{ languagePlaceholder }}", both just output a string, not the value of the prop.

[shentao]

Hey @zachleigh! Thanks for using vue-multiselect!

This is because if you use simple placeholder="languagePlaceholder" it will pass languagePlaceholder as a string. Using {{ languagePlaceholder }} won’t help as it evaluates the expression inside the brackets before passing it down to the component.
However, if you use the dynamic prop syntax – v-bind:placeholder="languagePlaceholder" or the shorthand version of it :placeholder="languagePlaceholder" it will pass the languagePlaceholder object as props. Similar to the :options props.

So simplty add the : before the placeholder props and it should fix the problem

Read https://vuejs.org/guide/components.html#Literal-vs-Dynamic for more information!

Let me know if this helps (I hope so!) or if there are any other problems!
Cheers!

[zachleigh]

Perfect! Thanks @shentao

[shentao]

No problem! Good luck with your app! If you have any other questions, problems or feature requests – let me know! 👍