wait-for directive on child elements does not hide contents when operating in vue-router route component

divmgl commented 8 years ago

Currently attempting to use vue-async-data and the wait-for directive but it does not hide elements that are inside of a vue-router route component.

<!-- app.html -->
<body>
<router-view></router-view>
<script src="app.js" />
</body>

<!-- component.html -->
<div wait-for="async-data">
This is a child element, should this be visible?
</div>
<div v-if="!$loadingAsyncData">
This is hidden correctly.
</div>

// app.js - snippet
// component and router
var component = Vue.extend({
  template: require("component.html!text"),
  asyncData: function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, 2000);
  }
});

router.map({
  "/": { component: component }
});

router.start(app, "body");

Edit: after reviewing the code, is it intended for the wait-for directive to only be used inside of a component tag? In that case, it would be impossible to use it in the context of vue-router, as vue-router is responsible for explicitly adding route components to the DOM.

yyx990803 commented 8 years ago

You don't need the async data mixin if you are using vue-router, just use the transition hooks

divmgl commented 8 years ago

@yyx990803 thanks for the quick response

vuejs / vue-async-data

wait-for directive on child elements does not hide contents when operating in vue-router route component #10