如何解决Vue @Watch不触发布尔更改
我正在尝试在vue-ts中使用监视功能。 我设置了一个watch函数,该函数会在布尔变量值更改时触发, 它根本不会触发,我也不知道为什么。
我的代码:
这是数据声明
<script lang="ts">
import { Vue,Component,Prop,Watch } from "vue-property-decorator";
import { CSSModule } from "@/Services/Modules/CSSModule";
@Component({})
export default class CommentCard extends Vue {
@Prop() comment!: Object;
@Prop() cmeditor!: Object;
@Prop() nextCommentdistance!: number;
@Prop({ default: 300 }) width!: number;
@Prop() commentIndex!: number;
private initialHeight: string;
private textMarker: Object;
private cssModule: Object;
private isFocused: boolean;
在安装后,我正在更改数据值,因此应该触发手表
mounted() {
this.setDivHeight();
this.isFocused = false;
}
这是函数
@Watch("isFocused")
highlightComment() {
if (this.textMarker) {
this.textMarker.clear();
}
const css = this.isFocused
? "background-color: " +
this.cssModule.hexToRgba(this.comment.typeColor,0.5)
: "background-color: " +
this.cssModule.hexToRgba(this.comment.typeColor,0.8) +
"; Box-shadow: 5px 5px 4px rgb(23,24,26)";
let locations = this.comment.serialize.replace("N","");
locations = locations.split(",");
let startLocation = locations[0].split(":");
let endLocation = locations[1].split(":");
this.textMarker = this.cmeditor.markText(
{ line: parseInt(startLocation[0]),ch: parseInt(startLocation[1]) },{ line: parseInt(endLocation[0]),ch: parseInt(endLocation[1]) },{
css: css,}
);
}
它根本不会被调用,我什至在安装后甚至使用按钮更改isFocused的值,但它仍会触发手表。
谢谢。
解决方法
您必须初始化属性以使其具有反应性。
代替:
private isFocused: boolean;
使用
private isFocused: boolean = false;
您应该对Vue应用程序中的每个属性执行此操作。请注意,您可以使用null
;只要该属性不是undefined
,它将起作用。
有关更多信息,请参见:https://vuejs.org/v2/guide/reactivity.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。