我看到之前的问题与我面临的相同问题,但我尝试根据问题的解决方案来解决它!但它不起作用
在我的<template>
:
<modal name="MyModal" >
<span class="myClass" id="visible">visible</span>
</modal>
在我的<script>
:
export default {
name: "myProject",
data: function() {
return {}
},
methods:
Open_EditTask: function() {
this.$modal.show("MyModal");
this.CurrentTask = this.MyTask;
if ( app.EditTask.visible == true ) { document.getElementById('visible').innerHTML = 'visible'; }
else { document.getElementById('visible').innerHTML = 'hidden'; }
}
}
我用过modal
用于创建模式的插件。
我的问题是当模式打开时..文本没有根据 app.EditTask.variable
进行更改值,但是当我尝试打印它的值时..它向我显示它的值 true 或 false。
错误消息:
Uncaught TypeError: Cannot set property 'innerHTML' of null
最佳答案
为什么不使用计算,这很简单。
模板:
<modal name="MyModal" >
<span class="myClass" id="visible"> {{ isVisible }} </span>
</modal>
Javascript:
export default {
name: "myProject",
data: function() {
return {}
},
methods:{
Open_EditTask: function() {
..
}
},
computed: {
isVisible(){
return app.EditTask.visible ? 'visible' : 'hidden';
}
}
}
要更改类名称:
模板:
<modal name="MyModal" >
<span :class="{myClass: true, hidden: !isVisible, visible: isVisible}" id="visible"></span>
</modal>
Javascript:
export default {
name: "myProject",
data: function() {
return {}
},
methods:{
Open_EditTask: function() {
..
}
},
computed: {
isVisible(){
return app.EditTask.visible;
}
}
}
关于javascript - 未捕获的类型错误 : Cannot set property 'innerHTML' of null [VueJs],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53138495/