KvCheckbox, KvRadio, KvSwitch: Avoid SSR problems when setting the UUID

[ryan-ludwig]

Running into issues on UI with mismatched uuids. This issue does not present itself in storybook. I believe this is caused by SSR setting the UUID on created, then client-side hydration overwriting part of it(?) on mount.

Setting in mounted keeps the IDs in sync.

VUE-714

[ryan-ludwig]

Curious if anyone has any more insight on this.

[ryan-ludwig]

Hmm, the tests don't like this, and we'd want to have the UUID there on SSR anyway... Will try some other ways.

[eddieferrer]

Why don't you set the UUID as a global variable outside the component definition. I don't believe we need two way binding on that anyway.

something like:

const uuid = `kvc-${nanoid(10)}`

export default {
      data() {
		return {
			uuid,
			isChecked: false,
		};
	},
}

[ryan-ludwig]

@eddieferrer Unfortunately that makes all <kv-radios>s on the page have the same UUID.

[ryan-ludwig]

Looks like this is not a new problem.
facebook/react#5867

[ryan-ludwig]

The latest push regenerates the ID on mounted keeping the label and input synced.