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

未被捕获的TypeError：无法将属性'innerHTML'设置为null [VueJs]

1 个答案:

要更改课程名称：