Uncaught 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.

Сообщение об ошибке:

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