VueJS - manipulate DOM after computed

Question

I'm getting posts and comments from an API, using Vuex. Right now, I have:

  mounted () {
    this.$store.dispatch('getComments', this.post);
  },

  computed: {
    comments () {
      return this.$store.getters.orderedComments;
    },

The comments body is a string that contains HTML tags. I need to strip out the href attribute from a tags of a given class.

  cleanUnwantedLinks () {
    const link = document.getElementsByClassName('link-class')[0];
    link.removeAttribute('href');
  }

I'm not sure how to call cleanUnwantedLinks . It should be called just after the component is mounted (when I have the comments already). Is there a way to do it?

Answer 1

If you will return a promise from your getComments action, you could do:

this.$store
  .dispatch('getComments', this.post)
  .then(() => {
    cleanUnwantedLinks()
    /* 
    Can also try wrapping your call in $nextTick
    this.$nextTick(() => { cleanUnwantedLinks() })
    */
  });