访问已安装的VueJS内的数据

Question

我试图用Vuejs创建一个简单的应用程序来检查标题标签的长度（px）。

在安装内部我设置了标题的默认值并运行默认标题标签的检查长度，但它返回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来确保在获取宽度之前更新了视图，但是您希望每次都将其作为{的一部分来执行此操作{1}}。以下是您可以更改的内容：

1. 向titleCheck添加ref属性，因此您无需使用title-preview（没有任何问题，但我更愿意让document.getElementById为我这样做）

Vue

1. 更改<div id="title-preview" ref="titleRef">{{title}}</div>以使用titleCheck以及$nextTick来获取$refs：

title-preview

1. 您可以简化titleCheck: function() { this.$nextTick(function () { var title_width = this.$refs.titleRef.offsetWidth; this.message = title_width + 'px'; }); } 事件以设置标题，然后调用mounted方法：

titleCheck

这可以帮到你找到你想要的东西。