Невозможно установить свойство 'innerHTML' для null ", Vue - PullRequest
0 голосов
/ 22 января 2019

У меня есть два компонента для редактирования объектов 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>

// Javascript code

switchEditButtonClicked: function(){

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

  if (this.showTextEditor) {

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

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

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

},

Начальное значение для 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? Не совсем уверен, почему икак это исправить ..

Ответы [ 2 ]

0 голосов
/ 22 января 2019

На данный момент textarea еще не доступен / не обработан (отложено на v-if), попробуйте запросить его внутри Vue.nextTick.

Отложить обратный вызов для выполнения после следующего цикла обновления DOM. Используйте его сразу после изменения некоторых данных, чтобы дождаться обновления DOM.

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

}
0 голосов
/ 22 января 2019

Невозможно установить свойство 'innerHTML' для null ", Vue

Это означает, что строка document.getElementById('myTextArea').innerHTML завершается ошибкой, и проблема заключается в поиске - document.getElementById('myTextArea') ничего не возвращает, чтопоясняет сообщение об ошибке - поиск по идентификатору приводит к null, и вы пытаетесь установить innerHTML этого.

У вас do есть элемент с myTextArea ID,так что причина этого в том, что элемент не присутствует, когда код JavaScript запускается .

Это также объясняет, почему установка кода для запуска с window.onload не показывает ошибку -это заставит его выполняться после полной визуализации страницы, поэтому элемент DOM будет существовать, и вы сможете получить его.

Причина, по которой вы не получаете текст, заключается в том, что вы добавляете егонеправильный путь. Вместо .innerHTML вы должны установить свойство .value

document.getElementById('myTextArea').value = this.editedConfig;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...