Javascript 无法设置属性'；innerHTML'；“空”的；，Vue

我有两个用于编辑JSON对象的组件。我有一个按钮可以在这两者之间切换。以下是html代码：

<v-btn @click="switchConfigClicked">Switch config</v-btn>
<h4 class="switchButtonInfo">Switch between editor/plain-text</h4>
<v-btn class="switchEditButton" @click="switchEditButtonClicked">Switch Editor</v-btn>
<div class= "editorComponents">
  <div v-if="showEditComponents" class="editor">
    <div v-if="showJsonEditor">
      <JsonEditor is-edit="true" v-model="editedConfig" ></JsonEditor>
    </div>
    <div v-if="showTextEditor">
      <textarea id="myTextArea" cols=75 rows=100></textarea>
    </div>
  </div>

showJsonEditor=true

，

showTextEditor=false

的起始值给出了错误：

无法将属性“innerHTML”设置为null，Vue

我试着像下面这样设置代码

window.onload = function() {
    // all of your code goes in here
    // it runs after the DOM is built
}

不显示错误，但也不显示文本

测试用例

我从

switchConfigClicked

中注释掉了这两行：

//this.showTextEditor = !this.showTextEditor;
//this.showJsonEditor = !this.showJsonEditor;

并反转了

showJsonEditor=false

，

showTextEditor=true

结果

文本在文本编辑器中显示，没有错误

结论

我觉得这与我的

v-if

有关，当showTextEditor设置为false，然后更改为true时，可能我们正在尝试在创建新DOM之前输入文本？不确定为什么以及如何修复此问题

无法将属性“innerHTML”设置为null，Vue

这意味着行

document.getElementById（'myTextArea'）.innerHTML

失败，问题在于查找-

document.getElementById（'myTextArea'）

不返回任何内容，这澄清了错误消息-按ID查找会导致

null

，您可以尝试设置

innerHTML

您确实有一个ID为

myTextArea

ID的元素，因此原因如下

这也解释了为什么将代码设置为在

窗口中运行。onload

不会显示错误-这会将其设置为在页面完全呈现后执行，因此DOM元素将存在，并且您可以获取它

你没有收到文本的原因是因为你添加的方式不对。而不是

.innerHTML

---

此时，

textarea

尚未可用/呈现（延迟时间为

v-if

），请尝试在内部查询它

将回调延迟到下一个DOM更新周期之后执行。在更改某些数据以等待DOM更新后立即使用它

---

这意味着

document.getElementById（'myTextArea'）

在调用时在DOM中找不到ID为

myTextArea

的元素。可能Vue尚未进入更新周期。但是在Vue中使用

document.getElementById（'myTextArea'）.innerHTML=…

无论如何都是不应该做的。@TimoCengiz您需要在

window.onload

中同时使用这两个代码，并设置

.value

属性。如上所述，现在没有错误，但仍然没有更新任何文本。空文本区：（@TimoCengiz那么，我唯一能想到的是，在这之后，文本区域会发生另一次更新。我对Vue不够熟悉-也许你的设置错误，你应该以不同的方式进行更新？返回一步。你说“你需要两个代码”是什么意思在这种情况下？如果只放置

document.getElementById（'myTextArea'），我只将´.value´行放在´window.onload´中.value=this.editedConfig；

在

窗口中.onload

，那么你就不会有

this.editedConfig

的值了，这只是一个简单的问题。我使用的是nextTick的promise版本，所以我在使用

this

时引用的是同一个vue实例，但是我得到：

uncaught（在promise中）TypeError:尝试执行控制台时无法读取属性

。请登录我的

此

variable@TimoCengiz如果你正在使用它，你不应该出现这种类型的错误。你能在这里发布你是如何使用它的吗？或者编辑你的文章。没问题，很高兴你把它整理好了！：）

//this.showTextEditor = !this.showTextEditor;
//this.showJsonEditor = !this.showJsonEditor;

document.getElementById('myTextArea').value = this.editedConfig;

switchEditButtonClicked: function () {
  this.showTextEditor = !this.showTextEditor;
  this.showJsonEditor = !this.showJsonEditor;

  if (this.showTextEditor) {
    this.editedConfig = JSON.stringify({
        "hello": "test"
      }, undefined, 4);

    Vue.nextTick(() => {
      // Or better yet use a `ref`
      document.getElementById('myTextArea').innerHTML = this.editedConfig;
    });

  } else {
    //this.editedConfig = JSON.parse(this.edite)
  }

}