Access data inside mounted VueJS

Question

I'm trying to create simple app with Vuejs that will check length of title tag (px).

Inside mounted I set the default value for title and run check length of default title tag but it return 0. When I change value of input, it work fine.

Here is my code. Link: https://codepen.io/mrtienhp97/pen/LeOzGa

HTML:

<div id="app">
   <input v-model="title" @input="titleCheck()">

  <div id="title-preview">{{title}}</div>

  <div class="message">{{message}}</div>
</div>

CSS:

#title-preview {
  display: inline-block;
}

JS:

new Vue({
  el: '#app',
  data: {
    title: '',
    message: ''
  },
  mounted: function() {
    this.$nextTick(function () {
      this.title = "Default Title";
      var title_width = document.getElementById("title-preview").offsetWidth;
      this.message = title_width + 'px';
    });
  },
  methods: {
    titleCheck: function() {
      var title_width = document.getElementById("title-preview").offsetWidth;
      this.message = title_width + 'px';
    }
  }
})

Can anyone help me correct it?

Answer 1

You had the right idea in the mounted event to use the $nextTick to make sure the view was updated before getting the width, but you want to do that every time by making it part of titleCheck. Here's what you can change to get it working:

1. Add a ref attribute to title-preview so you don't need to use document.getElementById (nothing wrong with it, but I prefer to let Vue do that for me)

<div id="title-preview" ref="titleRef">{{title}}</div>

2. Change titleCheck to use $nextTick as well as the $refs to get title-preview:

titleCheck: function() {
  this.$nextTick(function () {
    var title_width = this.$refs.titleRef.offsetWidth;
    this.message = title_width + 'px';
  });
}

3. You can simplify your mounted event to set the title and then call your titleCheck method:

mounted: function() {
  this.title = "Default Title";
  this.titleCheck();
}

This should get you what you're looking for.