Closed Aturan closed 8 years ago
Having the same issue, this turns out to be quite a typical scenario:
<div v-if="!$loadingRouteData">
<router-view></router-view>
</div>
@Aturan your jsFiddle was using Vue 1.0.8, I just tested it again with the 1.0.13 and this issue error is still occurring: https://jsfiddle.net/oy7ckagx/2/
You're using $loadingRouteData
as document so this could be a potential bug. The error is coming from the the cloneNode
function in Vue.js: https://github.com/vuejs/vue/blob/eec2cdb04f7e314e1f7c89e1472c5a3a161f1c3a/src/parsers/template.js#L198
Looks like the issue is with nested template elements as suggested by the function's description:
/**
* 1. Deal with Safari cloning nested <template> bug by
* manually cloning all template instances.
* 2. Deal with IE10/11 textarea placeholder bug by setting
* the correct value after cloning.
*
* @param {Element|DocumentFragment} node
* @return {Element|DocumentFragment}
*/
For me the error occurs in both Safari and Chrome.
@Aturan please update the issue title to be something more descriptive so that others with similar issues can easily find this page and provide more feedback. Thanks!
Agree on obscure title. Now, I'm pretty sure the issue is more conceptual rather than code bug: vue-router's transition pipeline must be able to render target router-view
before data is available, hence wrapping them with data-dependent conditionals is not supported.
FWIW I was unable to overcome this limitation and started voie (no ads intended, just pointing out a possible alternative solution).
FYI this has been fixed in https://github.com/vuejs/vue-router/commit/346ab56d3a07f0604619b2607d8aeb8370d0f1d0
I am getting the same error with
<div v-if="error">
{{ error }}
</div>
<router-view v-if="!error"></router-view>
Using last versions of vuejs and vue-router
If a router-view is wrapped inside of a v-if directive, and a async data in data hook, that will throw Error in back; Error:
case: https://jsfiddle.net/oy7ckagx/ please open console in result iframe