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