javascript - Access data inside mounted VueJS - Stack Overflow

admin管理员组

文章数量:1296897

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:

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?

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?

• javascript
• vue.js

Share Improve this question Follow edited Jan 8, 2018 at 16:18 ChrisM 1,58666 gold badges2222 silver badges2929 bronze badges asked Jan 6, 2018 at 16:34 Tiến Nguyễn QuangTiến Nguyễn Quang 9111 gold badge11 silver badge33 bronze badges 1

• 1 The reason is that the whole mounted() is happening before the rendering of the page. You should delay it somehow. I'm still trying to figure out a good answer though. – Las Ten Commented Jan 6, 2018 at 16:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptAccess data inside mounted VueJSStack Overflow