vue-formulate icon indicating copy to clipboard operation
vue-formulate copied to clipboard

Way to apply global configured to classes to label in scoped slot?

Open LLCampos opened this issue 2 years ago • 1 comments

Let's say I have the following input in one page:

  <FormulateInput
    type="text"
    label="Select a username"
  />

And, somewhere else, I have:

  <FormulateInput
    type="text"
    label="Select a username"
  >
    <template #label="{ label, id }">
      <label :for="id">
        {{ label }}
        <Whatever />
      </label>
    </template>
  </FormulateInput>

In this scenario, if I have globally configured classes for the label only the first example will have those classes applied.

I tried to look at the context object, but didn't find anything there that I could use in the scoped slot example.

Is there any way to do it without code duplication?

I'm pretty new to Vue.js so I might be missing something really obvious.

LLCampos avatar Apr 06 '22 09:04 LLCampos

I think you can get the classes from the scoped slot props: e.g. classes.label

Though it's been recommended to use Slot Components if you are planning to reuse the customised label in other places.

woahitsjc avatar Aug 02 '22 10:08 woahitsjc