我正在尝试使用 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>
Run Code Online (Sandbox Code Playgroud)
CSS:
#title-preview {
display: inline-block;
}
Run Code Online (Sandbox Code Playgroud)
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';
}
}
})
Run Code Online (Sandbox Code Playgroud)
谁能帮我改正?