CODEWITHSUNDEEP
javascriptvue.jsaxiosnuxt.jssingle-page-application
Modena
Modena

Reputation: 75

Cannot read property 'substring' of undefined NUXT

I am having problems in an html tag that uses an object from my object in store.

When i refresh my page, the array from my sotre is empty, so i when i refresh in the index page, it will first load the html, then the mounted method, and its where i fill my store. its says that Cannot read property 'substring' of undefined

index.vue that i use this object:

          <p v-html="pegaPrimeiroPost.conteudo.substring(0,500)"></p>

export default of index.vue:

  computed: {
    ...mapGetters({
      postsDB: "postagensDB/pegaPosts",
      pegaPrimeiroPost: "postagensDB/pegaPrimeiroPost",
    }),
  },
  methods: {
    ...mapActions({
      buscaPostDB: "postagensDB/pegaPostsDB",
    }),
  },
  async mounted() {
    **await this.buscaPostDB();**
    });
  },

this object pegaPrimeiroPost is an objetct from my array that i fill from my database.

store/postagensDB:

import axios from 'axios'

export const state = () => ({
    posts: [],
    primeiroPost: {},
})

export const getters = {
    pegaPosts(state) {
        return state.posts;
    },
    pegaPrimeiroPost(state) {
        return state.primeiroPost;
    },

}

export const actions = {
    async pegaPostsDB(state) {
        await axios
            .get("http:/MY_API_ADRESS")
            .then((response) => {
                state.commit('carregaStatePosts', response.data)
            })
            .catch((response) => {
                console.log(response)
            });
    },

}

export const mutations = {
   async carregaStatePosts(state, postsDB) {
        state.posts = postsDB.posts;
        state.primeiroPost = state.posts[0];
    },
}

If i erase the substring() method, reload the page, then it will fill my store; and then re-add the substring(), it works, but wont solve my prob. Can anyone help me?

Upvotes: 0

Views: 756

Answers (1)

dave
dave

Reputation: 64657

I've never used Vue, but this sounds like you have some sort of async action that populates the object, but your default value (used before the async call has completed) doesn't have that property. The quickest solution is probably just give it a value if it doesn't exist:

(pegaPrimeiroPost.conteudo || '').substring(0,500)

or set a "default" object with that property:

export const state = () => ({
    posts: [],
    primeiroPost: { conteudo: '' },
})

Upvotes: 1

Related Questions