使用JavaScript更新Vue中的数据对象不会'；t触发Vue反应性

我在一个项目中使用VUE2.X和QuillJS

羽毛笔编辑器位于一个模块中。但在内部，我使用事件侦听器对编辑器本身进行模糊处理。羽毛笔没有模糊，而且这些解决方案也不起作用

我在包含的div上还有一个Vue类绑定

如果我单击tab或click in然后离开编辑器，则会根据类绑定的条件显示一个带有警告标签的红色框

模糊正在检查用户是否键入空格，然后离开编辑器。模糊将清除编辑器，将Vue数据对象agenda.objective设置为空白，并将数据对象agenda.objective设置为true。它正在工作

但是，即使触发该类的内容设置为true，该类也不会在编辑器周围被激活

我在这里把它加载到代码笔上：

谢谢你，唐娜

代码也在下面

Vue.component（'editor'{
模板：“”，
道具：{
价值：{
类型：字符串，
默认值：“”
},
占位符：{
类型：字符串，
默认值：“请在此处键入。”
}
},
数据：函数数据（）{
返回{
编辑：空
};
},
挂载：函数挂载（）{
var_this=这个；
this.editor=新羽毛笔（this.$refs.editor{
模块：{
键盘：{
绑定：{
“选项卡”：{
关键词：9，
处理程序：函数（范围、上下文）{
返回true；
}
}
}
},
工具栏：[
[“粗体”、“斜体”、“下划线”{
“颜色”：[]
}, {
“背景”：[]
}, {
“列表”：“项目符号”
}，'link'，'clean']
]
},
主题:"雪",，
格式：[“粗体”、“下划线”、“斜体”、“颜色”、“背景”、“列表”、“链接”、“干净”]
});
this.editor.root.innerHTML=this.value；
this.editor.root.dataset.placeholder=this.placeholder；
this.editor.on（'text-change'，function（））{
返回_this.update（）；
});
//防止事件侦听器冒泡。
if（document.querySelector（“.ql工具栏”））{
document.querySelector（'.ql toolbar'）.addEventListener（'mousedown'，函数（e）{
返回e.preventDefault（）；
});
}
//下面检查编辑器是否加载到DOM中。
if（document.querySelector（“.ql编辑器”））{
document.querySelector（“.ql编辑器”）.addEventListener（'blur'，function（）{
var lcEditor=document.querySelector（“.ql编辑器”）；
var lcInput=lcEditor.innerHTML.replace（//g'，）.trim（）；
如果（lcInput.length==0）{
lcEditor.innerHTML=''；
app.$data.agenda.objective=''；
app.$data.objective=true；
}否则{
app.$data.objective=false；
}
console.log（“showErrorObjective:+app.$data.showErrorObjective”）；
});
}
},
方法：{
更新：函数更新（）{
常数限值=1000；
//log（this.editor.getText（）.length）；
if（this.editor.getLength（）>limit）{
this.editor.deleteText（limit，this.editor.getLength（））；
}
this.$emit（'input'，this.editor.getText（）？this.editor.root.innerHTML:“”）；
}
}
});
var app=新的Vue({
el:“#vuepp”，
数据：{
议程：{
目标：“”
},
展示会目标：正确，
编辑会议目标：错误，
目标：错误，
showValidationErrors:错误
},
方法：{
checkTextArea:函数（id）{
如果（id==“目标”）{
if（this.agenda.objective.replace（//g'，）.trim（）.length==0）{
this.agenda.objective=“”；
}
}
}
}
});
。表单组{
边缘底部：0.25雷姆；
}
.议程标签{
颜色：#323130；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字体大小：14px；
字号：600；
线高：17px；
文本对齐：左对齐；
}
.AgendaArea编辑{
背景色：#FFFFFF；
边框：1px实心#9797；
边界半径：2px；
填充：8px 8px 8px 8px；
}
.agendareasmall{
颜色：#605E5C！重要；
字体系列：“Segoe UI”、塔荷马、日内瓦、Verdana、无衬线字体！重要；
字体大小：12px！重要；
字体重量：300！重要；
线高：14px！重要；
文本对齐：左！重要；
溢出：隐藏！重要；
/*高度：28px*/
最大高度：28px！重要；
填充：0px！重要；
宽度：100%！重要；
边界：没有！重要；
}
.agendareaeditor.error{
边框：1px实心#CD0A0A！重要；
}
.fa铅笔{
字号：0.9em；
颜色：#0078D4；
}
.fieldWarningLabel{
背景色：#FDE7E9；
边界半径：2px；
高度：16px；
填充：0px 8px；
页边距底部：0px！重要；
浮动：对；
颜色：#D13438；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
字体大小：11px；
字体大小：400；
线高：14.63px；
}

会议目标
请输入会议目标/目的
FYI，如果您的目的是“防止事件侦听器冒泡”，那么您需要的是
e.stopPropagation（）
，而不是
e.preventDefault（）
尝试一下
app.bathrorobjective=true
。您真的不需要直接访问
$data
谢谢。像duh一样，我应该有e.stopPropagation（）。但是…我的问题还没有解决。如果我进出编辑器，就会出现错误警告。如果我键入一个空格，然后离开编辑器，它会清除该字段，但不会出现错误警告。仅供参考，如果您的目的是“防止事件侦听器冒泡”，那么您需要
e.stopPropagation（）
，而不是
e.preventDefault（）
尝试
app.shorrorObjective=true
。你真的应该