CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuexnuxt.js
yeti blue
yeti blue

Reputation: 271

Variable being undefined in data() in Nuxt.js

For some reason this was giving me trouble this morning, and I just couldn't figure out why it wouldn't work.

I have a variable 'applications' set equal to the data returned by my axios call. I want to include 'applications.name' as a field in my data() to send as a form. However when I try this, Vue gives me an error saying 'Cannot read property 'name' of undefined'.

{{applicants.name}} and {{applicants.role}} are working in the template, so I'm not just getting empty data

Also another thing, data() doesn't seem to recognize my 'this.loggedInUser.id' field either for some reason. (I've imported both Vuex and mapGetters)

Appreciate the help! :)

async asyncData({ $axios, params }) {
    try {
      let applicants = await $axios.$get(`/api/v1/apps/${params.id}/`);
      return { applicants };
    } catch (error) {
      console.log(error);
      return { applicants: [] };
    }
  },
data() {
    return {
      applicants: [],
      application: {
        name: this.applicants.name,
        status: null,
        company: null,
        role: this.applicants.role
        // user: this.loggedInUser.id

      }
    };
  }
};

Upvotes: 0

Views: 2139

Answers (2)

Albert Allagulov
Albert Allagulov

Reputation: 155

I am assuming that when the data is initialized, the values applicants.name and loggedInUser.id do not exist. Try changing the data like this

data() {
    return {
        applicants: { name: '' },
        application: {
            name: this.applicants.name,
        },
        loggedInUser: { id: '' }
    };
}

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to pass this as parameter to the data property function:


data(vm) { //refers to this keyword
    return {
      applicants: [],
      application: {
        name: vm.applicants.name,
        status: null,
        company: null,
        role: vm.applicants.role
        // user:vm.loggedInUser.id

      }
    };
  }

or make application as a computed property :

data() {
    return {
      applicants: [],
    
    };
  }
,
computed:{
    application(){
        return {
        name: this.applicants.name,
        status: null,
        company: null,
        role: this.applicants.role
        // user: this.loggedInUser.id

      }
    }
}

Upvotes: 2

Related Questions