未被捕獲的TypeError：無法將屬性'innerHTML'設置為null [VueJs]

Question

我看到以前遇到的有關同一問題的問題，但我嘗試根據問題的解決方案來解決！ 但它不起作用

在我的<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。

錯誤信息：

未捕獲的TypeError：無法將屬性'innerHTML'設置為null

Answer 1

為什么不使用計算機，這很簡單。

模板：

<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;
    }
  }
}