0

At this moment, I have a component which is a component for a Selectbox which is used throughout the application. I want to set the placeholder dynamically, so that you can use the button wherever you want, and I know you can do this with Vue Slots, but I don't know how:

For example, I want to achieve this:

<SDSelectBox>Amount of Items</SDSelectBox> and another use case <SDSelectBox>How many items do you want?</SDSelectBox>

which basically replaces the placeholder of the item.

Thanks in advance.

Bram
  • 165
  • 1
  • 2
  • 8

1 Answers1

1

You can make the placeholder dynamic by passing a prop to your component and then setting the placeholder to the value of the prop.
Like so:

<SDSelectBox :placeHolder="someValueFromCurrentComponent"></SDSelectBox>
//Inside the SDSelectBox
<template>
  <select>
   <option value="" disabled selected>{{placeholder}}</option>
...
props: ['placeHolder'],

Or with a slot you can simply insert into the SDSelectBox: 

<select>
 <slot></slot>
...
//parent component
<SDSelectBox>
 <option value="" disabled selected>{{placeholder}}</option>
</SDSelectBox>
Michael
  • 4,538
  • 5
  • 31
  • 58
  • And can I achieve this with `````` also or not? – Bram Nov 05 '19 at 07:58
  • Updated my answer, note I used a default slot you can use a named one as well or a scoped slot which would be slightly different, a good idea to read about those too. – Michael Nov 05 '19 at 08:03
  • Thank you! And with an input field? There you can't use ``` – Bram Nov 05 '19 at 08:21
  • With an input field you would set the value but since the value is an attribute on the tag you would need to do that where the tag is i.e in the child component which can be done with a prop but I can't think of a way with a slot unless you want the whole input as the slot in which case the question is what is the purpose of the custom component if most of it is a slot? – Michael Nov 05 '19 at 08:41