Javascript 访问安装的VUEJ内的数据

我正在尝试用Vuejs创建一个简单的应用程序，它将检查标题标签的长度（px）

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

这是我的密码。链接：

HTML:

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

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

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

JS:

---

有人能帮我更正吗？

您在

挂载事件中有一个正确的想法，即使用
$nextTick
确保在获取宽度之前更新视图，但每次都要将其作为
标题检查的一部分。以下是您可以更改以使其正常工作的内容：

将
ref
属性添加到
title preview
中，这样您就不需要使用
document.getElementById
（这没什么问题，但我更愿意让
Vue
为我这样做）
{{title}}

更改
标题检查
以使用
$nextTick
以及
$refs
以获取
标题预览
：
标题检查：函数（）{
此.$nextTick（函数（）{
变量title_width=此。$refs.titleRef.offsetWidth；
this.message=title_width+'px'；
});
}

您可以简化
mounted
事件以设置标题，然后调用
titleCheck
方法：
mounted:function（）{
this.title=“默认标题”；
这个。titleCheck（）；
}

这应该能让您找到所需的内容。
原因是整个mounted（）都是在呈现页面之前发生的。你应该设法推迟。不过，我仍在努力找出一个好答案。嗨，帕特里克，如果我在标题中添加静态数据，它会起作用。但是当我试图通过使用axios获取数据来设置动态标题时（在
挂载的
中，我添加了这些代码
axios.get（'request url'）…
和
this.title=response.data
），消息返回0。我知道我的“axios”代码是正确的，因为我可以看到输入中的值。感谢您在没有看到您的
axios
回调的情况下告诉我，但我怀疑您用来设置
this的
this。title
不是Vue实例。在调用axios之前，尝试将实例（
var vm=this；
）保存在变量中，然后在
axios
回调中，使用
vm.title=response.data
@PatrickSteele我遇到了同样的问题。保存实例（var vm=this；）对我来说很有用。你能解释一下这种行为吗？
#title-preview {
  display: inline-block;
}

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';
    }
  }
})