vue-async-data not working

Question

I'm trying to use vue-async-data to fetch data asynchronously before rendering my Vue component, but I'm having no success. I'm not getting any erros, but it simply doesn't work.

Here's my main.js code:

import Vue from 'vue'
import VueAsyncData from 'vue-async-data'
import router from './router'
import App from './App.vue'

Vue.use(VueAsyncData)

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

And here's my App.vue code:

<template>
  <div>
    {{ msg }}
    <navigation wait-for="async-data"></navigation>
  </div>
</template>

<script>

import Navigation from './components/Navigation.vue'

export default {
  name: 'app',
  components: {
    Navigation
  },
  data: function() {
    return {
      msg: 'not loaded yet...'
    }
  },
  asyncData: function (resolve, reject) {
    // load data and call resolve(data)
    // or call reject(reason) if something goes wrong
    setTimeout(function () {
      // this will call `vm.$set('msg', 'hi')` for you
      resolve({
        msg: 'hi'
      })
    }, 1000)
  }
}
</script>

The msg value doesn't change at any moment, but the component is still rendered.

Am I missing somenthing?

"Does not work with Vue 2.0." github.com/vuejs/vue-async-data — Bert
– Bert, Commented Apr 27, 2017 at 18:18
Oh, thanks, didn't noticed that. Do you suggest another form to achieve what I need? — felipeecst
– felipeecst, Commented Apr 27, 2017 at 18:22
It looks like you are using vue-router. You can use beforeRouteEnter. router.vuejs.org/en/advanced/navigation-guards.html — Bert
– Bert, Commented Apr 27, 2017 at 18:27
Thanks, I decided to use this approach instead, that I found on the guide that you sent: router.vuejs.org/en/advanced/data-fetching.html. — felipeecst
– felipeecst, Commented Apr 27, 2017 at 19:14

felipeecst · Accepted Answer · 2017-04-27 19:19:00Z

As Bert Evans stated, vue-async-data doesn't work with Vue 2.0.

I used vue-router and the created function to achieve what I needed (as suggested in: https://router.vuejs.org/en/advanced/data-fetching.html.

<template>
  <div>
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <navigation v-if="currentUser"></navigation>
  </div>
</template>

<script>

import Navigation from './components/Navigation.vue'

export default {
  name: 'app',
  components: {
    Navigation
  },
  data: function() {
    return {
      loading: true,
      error: false,
      currentUser: null
    }
  },
  created: function() {
    this.fetchUserData()
  },
  methods: {
    fetchUserData: function() {
      this.$http.get('/Account/CurrentUserInfo').then(data => {
        this.currentUser = data
        this.loading = false
      }, response => {
        this.loading = false
        this.error = true
      });
    }
  }
}

</script>

Collectives™ on Stack Overflow

vue-async-data not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related