Cannot read property 'substring' of undefined NUXT

Question

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?

dave · Accepted Answer · 2021-05-24 18:20:52Z

1

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: '' },
})

answered May 24, 2021 at 18:20

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Modena Over a year ago

The first solution works PERFECT!!!! I have been on this problem for hours and had no idea that i could make an IF inside of this v-html prob. Honestly, i have never seen this. What is the name of this type of comparation? If someting is not what i want, then use ' ' or something else?

dave Over a year ago

It's just a logical or operator - which returns the right-hand side operand if the left operand is any falsy value. You might even be better off using the nullish coalescing operator ??, but in this case (a string) it's probably equivalent

Collectives™ on Stack Overflow

Cannot read property 'substring' of undefined NUXT

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related