From e8b83c0338d20c5c9f482231056f18497776b87a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 11 Nov 2018 22:56:30 -0400 Subject: [PATCH 1/7] fix(id): trigger id update on mount. --- src/mixins/id.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index 10b4ded14c6..4d92d93eafd 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -1,6 +1,7 @@ /* * SSR Safe Client Side ID attribute generation - * + * id's can only be generated client side, after mount. + * this._uid is not synched between server and client. */ export default { @@ -10,6 +11,13 @@ export default { default: null } }, + data () { + locaId_: null + }, + mounted () { + // mounted only occurs client side + this.localUid_ = `__BVID__${this._uid}` + }, methods: { safeId (suffix = '') { const id = this.id || this.localId_ || null @@ -19,12 +27,5 @@ export default { suffix = String(suffix).replace(/\s+/g, '_') return suffix ? id + '_' + suffix : id } - }, - computed: { - localId_ () { - if (!this.$isServer && !this.id && typeof this._uid !== 'undefined') { - return '__BVID__' + this._uid - } - } } } From 76f66c0dcb4f3db4c60f6a15f08c66d9373905a2 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 11 Nov 2018 23:06:11 -0400 Subject: [PATCH 2/7] Update id.js --- src/mixins/id.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index 4d92d93eafd..6fdf9f45cd9 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -12,11 +12,11 @@ export default { } }, data () { - locaId_: null + localId_: null }, mounted () { // mounted only occurs client side - this.localUid_ = `__BVID__${this._uid}` + this.localId_ = `__BVID__${this._uid}` }, methods: { safeId (suffix = '') { From 921d85e1c6401009cf7ab6c4185f17c47fd6add7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sun, 11 Nov 2018 23:09:39 -0400 Subject: [PATCH 3/7] Update id.js --- src/mixins/id.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index 6fdf9f45cd9..c623428f4be 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -12,7 +12,9 @@ export default { } }, data () { - localId_: null + return { + localId_: null + } }, mounted () { // mounted only occurs client side From da51f97a676e96527fcb7952a6c32f8add063e70 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 12 Nov 2018 02:35:48 -0400 Subject: [PATCH 4/7] Update id.js --- src/mixins/id.js | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index c623428f4be..88c9e4aacaf 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -18,16 +18,28 @@ export default { }, mounted () { // mounted only occurs client side - this.localId_ = `__BVID__${this._uid}` + this.$nextTick(() => { + // Update dom with auto ID after dom loaded to prevent + // SSR hydration errors. + this.localId_ = `__BVID__${this._uid}` + }) }, - methods: { - safeId (suffix = '') { - const id = this.id || this.localId_ || null - if (!id) { - return null + computed: { + safeId () { + // Computed property that returns a dynamic function for creating the ID. + // Reacts to changes in both .id and .localId_ And regens a new function + const id = this.id || this.localId_ + + // We return a function that accepts an optional suffix string + // So this computed prop looks and works like a method!!! + const fn = (suffix) => { + if (!id) { + return null + } + suffix = String(suffix || '').replace(\/s+/g, '_') + return suffix ? id + '_' + suffix : id } - suffix = String(suffix).replace(/\s+/g, '_') - return suffix ? id + '_' + suffix : id + return fn } } } From 39f3fd3fb84779e04ebb77a441a492e9b1918dee Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 12 Nov 2018 02:37:42 -0400 Subject: [PATCH 5/7] Update id.js --- src/mixins/id.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index 88c9e4aacaf..6b80f4f6245 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -36,7 +36,7 @@ export default { if (!id) { return null } - suffix = String(suffix || '').replace(\/s+/g, '_') + suffix = String(suffix || '').replace(/\/s+/g, '_') return suffix ? id + '_' + suffix : id } return fn From 497c152c40459cf3146872697b5810472a280ce4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 12 Nov 2018 02:38:24 -0400 Subject: [PATCH 6/7] Update id.js --- src/mixins/id.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index 6b80f4f6245..abb0d4d5a96 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -36,7 +36,7 @@ export default { if (!id) { return null } - suffix = String(suffix || '').replace(/\/s+/g, '_') + suffix = String(suffix || '').replace(/\s+/g, '_') return suffix ? id + '_' + suffix : id } return fn From f0c3a92d9dd15813df7c539e2b1191be459a38e4 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 12 Nov 2018 02:48:23 -0400 Subject: [PATCH 7/7] Update id.js --- src/mixins/id.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mixins/id.js b/src/mixins/id.js index abb0d4d5a96..fe8066e27ba 100644 --- a/src/mixins/id.js +++ b/src/mixins/id.js @@ -27,7 +27,7 @@ export default { computed: { safeId () { // Computed property that returns a dynamic function for creating the ID. - // Reacts to changes in both .id and .localId_ And regens a new function + // Reacts to changes in both .id and .localId_ And regens a new function const id = this.id || this.localId_ // We return a function that accepts an optional suffix string