javascript - 在已安装的 VueJS 中访问数据

Question

我正在尝试使用 Vuejs 创建简单的应用程序，它将检查标题标签的长度 (px)。

在 mounted 中，我设置了标题的默认值并运行检查默认标题标签的长度，但它返回 0。当我更改输入值时，它工作正常。

这是我的代码。链接: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';
    }
  }
})

谁能帮我修改一下？

Answer 1

您在 mounted 中的想法是正确的使用 $nextTick 的事件以确保 View 在获取宽度之前已更新，但您希望每次都通过将其作为 titleCheck 的一部分来执行此操作.以下是您可以更改以使其正常工作的内容:

1. 添加 ref属性为 title-preview所以你不需要使用 document.getElementById (这没什么问题，但我更愿意让 Vue 为我做这件事)

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

1. 更改 titleCheck使用 $nextTick以及 $refs得到title-preview :

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

1. 您可以简化您的 mounted事件设置标题，然后调用您的 titleCheck方法:

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

这应该能找到您要找的东西。