Code Monkey home page Code Monkey logo

vue-async-data's Issues

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

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.

One way binds

Would be awesome if this could 'refresh' one way binds when async data is received

Something like <span> Edit {{* person.name }} </span>

   asyncData: function () {
            var self = this
            return PeopleRedux
                    .single(self.$route.params.personId)
                    .then(function (person) {
                        return {
                            person: person
                        }
                    });
        },

Usage with Vue 2 & vue-router 2

Hi,

looking at this example for data fetching with vue-router v2+ I understand that the async data option has been removed and a pattern for async data very similar to this project is in use.

I'm refactoring a vue 1.x project with migration to v2 in mind, so I was wondering if my assumption is true and whether it'd be an option to adapt this plugin to work with 2.x

If so I'd might also be able to take care of the task and make a PR

Bower Support

Please can this package be added to bower. The other official plugins have been added, so it would make sense if this was added as well.

Thanks.

Using VueAsyncData.mixin throws "[vue-async-data] not installed!" warning.

In vue 1.0.21 there is still mechanism, that throws "[vue-async-data] not installed!" warning
while using vue-async-data as mixin.

<script>
import VueAsyncData from 'vue-async-data';

export default {
  mixins: [
    VueAsyncData.mixin,
  ],
...
  asyncData(resolve, reject) {
    CustomDataService.getItems().then(...

but it works properly!

Events not fired from broadcasting

When I try to broadcast event from asyncData I receive no event to child component.

// Parent with async data plugin
asyncData: function () {
    var self = this;
    return this.$http.get('foo.json')
        .then(function (response) {
            self.$broadcast('dataRetrieved', response.data);
            self.data = response.data;
        })
 }

But when I was using broadcast without asyncData I get events to child component

  // Parent without plugin
  methods: {
    getData: function () {

        this.$http.get('foo.json').success(function (data) {
            this.$broadcast('dataRetrieved', data);
            this.data = data;
        }).error(function (err) {
            console.log(err);
        });
    },
 }

Here is my child component, listening for events.

// Child
events: {
    dataRetrieved: function (data) {
       // Here should I get data, but this event is not fired.
        this.data = data;
    }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.