vue数据修改之后没有同步渲染出来，需要点一下屏幕才会进行页面更新（原因和解决方法）

这是一个很奇怪的问题，当时需要做一个状态判断，设置了一个布尔值edit：false如果是false则显示按钮A，反之则显示按钮B，但真正使用的时候出现了问题，当点击之后，edit数值变成了true，但是页面上的按钮没有进行同步更新，需要随意点击一下屏幕空白处才会进行更新经过多方排查，发现原因：因为再vue的data里面，一开始并不存在edit,这是通过后期方法进行的赋值。所以导致vue页面渲染的响

XAIhan

4200人浏览 · 2020-06-18 15:47:06

XAIhan · 2020-06-18 15:47:06 发布

这是一个很奇怪的问题，当时需要做一个状态判断，设置了一个布尔值

	edit：false

如果是false则显示按钮A，
反之则显示按钮B，

但真正使用的时候出现了问题，当点击之后，edit数值变成了true，但是页面上的按钮没有进行同步更新，需要随意点击一下屏幕空白处才会进行更新

经过多方排查，发现原因：
因为再vue的data里面，一开始并不存在edit,这是通过后期方法进行的赋值。所以导致vue页面渲染的响应慢一拍。

发现问题之后解决就很简单了，
在对应的数据里面添加上edit参数就可以

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^