Vuetify: [Bug Report] v-slider generates duplicate element id's

[robinv85]

Versions and Environment

Vuetify: 1.5.7
Vue: 2.6.10
Browsers: Chrome 73.0.3683.86
OS: Mac OS 10.14.3

Steps to reproduce

1. Use a Vuetify v-slider component with a custom id
2. See the generated HTML (both the container div and the input elements have the same id)

Expected Behavior

Each element should have a unique id, if both container and input elements need an id there could be a container-id similar to the suggested solution in #2777. Otherwise the id could be auto-generated with container appended or only the input should have the id. (probably best to stay consistent with other form controls)

<v-slider
   id="slider-input-id"
   container-id="slider-container-id"
   v-model="slider"
></v-slider>

Actual Behavior

<v-slider
   id="slider-id"
   v-model="slider"
></v-slider>

Also see the HTML output on this demo

Reproduction Link

https://codepen.io/robinvenneman/pen/RdmwOa

[marhali]

Can confirm this on latest Vuetify [2.1.10] and Vue [2.6.10] version.

[paulvonber]

Vuetify v2.1.11 still got it

[spencercap]

+1

[luis-abeno]

Same problem on version 2.1.15.

[radcki]

id's are generated here:
https://github.com/vuetifyjs/vuetify/blob/30632ab56f6215f66cdecd06f35b5fee9ab7faef/packages/vuetify/src/components/VInput/VInput.ts#L81
so it seems that Vue's _uid is not unique enough for this component.

maybe change from
computedId (): string { return this.id || `input-${this._uid}` },
to
computedId (): string { return this.id || `input-${this._uid}+${Math.ceil(Math.random()*1000)}` },
would be enough?

[eyesurewould]

id's are generated here:
https://github.com/vuetifyjs/vuetify/blob/30632ab56f6215f66cdecd06f35b5fee9ab7faef/packages/vuetify/src/components/VInput/VInput.ts#L81

so it seems that Vue's _uid is not unique enough for this component.
maybe change from
computedId (): string { return this.id || `input-${this._uid}` },
to
computedId (): string { return this.id || `input-${this._uid}+${Math.ceil(Math.random()*1000)}` },
would be enough?

For me, the issue occurs only on the v-range-slider component and I suspect that under the hood the v-input is being duplicated for use as the high and low sliders. The "value" for the range is an array of the two slider values.

If so, the uniqueness of the id may not be the true problem.

[paul-a-byford]

i'm also experiencing this error message, is there a work around or fix planned?

[VSymonenko]

created PR for this issue https://github.com/vuetifyjs/vuetify/pull/10654

[leonardoEbert]

Does this fix have a date to be released @johnleider ?

[eyesurewould]

I believe it's fixed in the latest release.

On Tue, Mar 3, 2020 at 3:42 PM Leonardo Ebert [e-mail]
wrote:

Does this fix have a date to be released @johnleider
https://github.com/johnleider ?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/6843?email_source=notifications&email_token=ABK7HOCOB2KOAFKKFO6TP3LRFVTRZA5CNFSM4HBQKTN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENVCEXQ#issuecomment-594158174,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABK7HOD3HSGV4WYN3AP6YBDRFVTRZANCNFSM4HBQKTNQ
.