时间戳

首页 > 解决方案 > 通过调用 this.$refs 更改 vuejs 的 html 标题后，vuejs 之后不会更新该 html 元素

javascript - 通过调用 this.$refs 更改 vuejs 的 html 标题后，vuejs 之后不会更新该 html 元素

问题描述

我有简单的 html 代码：

<script src="vue.js"></script>
<div id="app1">
  <h1 ref="heading">{{ title }}</h1>
  <button v-on:click="change" ref="myButton">Change Title</button>  
</div>
<script src="app.js"></script>

这是 app.js

let v1=new Vue({
  el: '#app1',
  data: {
    title: 'The VueJS Instance'    
  },
  methods: {
    change: function() {      
      this.title ='The VueJS Instance (Updated)';      
    }
  },
  watch: {
    title: function(value) {
      alert('Title changed, new value: ' + value);
    }
  }
});

v1.$refs.heading.innerText="BEFORE Change";

如您所见，我正在为“h1 标题”元素设置内文。之后我单击将调用更改方法的按钮，在调用之后它会打开一个新的对话框窗口，显示“标题已更改，新值：VueJS 实例（已更新）”但页面（h1 标题）未更新它仍然保持不变“更改之前”，我的代码有什么问题，我认为它应该更新标题（我使用的是 Vue.js v2.6.11 版本）。谢谢

标签： javascriptvue.jsvuejs2

解决方案

永远不要直接更新 Vue 模板的 DOM - 否则虚拟 DOM 和真实 DOM 之间的同步将丢失，并且会出现各种奇怪的错误或尴尬的行为。

没有人能拯救你免于被自己的脚射伤。删除代码中的最后一条语句，您将看到标题已正确更新。

推荐阅读