router-view rrror

[Aturan]

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:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null

case: https://jsfiddle.net/oy7ckagx/ please open console in result iframe

[inca]

Having the same issue, this turns out to be quite a typical scenario:

<div v-if="!$loadingRouteData">
  <router-view></router-view>
</div>

[amirrustam]

@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!

[inca]

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).

[yyx990803]

FYI this has been fixed in https://github.com/vuejs/vue-router/commit/346ab56d3a07f0604619b2607d8aeb8370d0f1d0

[fntneves]

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