Блог

Я создаю редактор кода vue , который состоит из 4 основных частей: html-код, css-код, js-код и результат (предварительный просмотр). Я хочу добавить переменные из данных (html-код, css-код и js-код), чтобы я мог использовать добавленные данные для результата в редакторе кода.

Мой шаблон выглядит так:

 lt;templategt;  lt;div class="grid"gt;  lt;div id="html" class="grid-cell"gt;  lt;textarea v-model="htmlCode" name="" id="" cols="30" rows="10"gt;lt;/textareagt;  lt;div class="title"gt;This is a celllt;/divgt;  lt;/divgt;  lt;div id="css" class="grid-cell"gt;  lt;textarea v-model="cssCode" name="" id="" cols="30" rows="10"gt;lt;/textareagt;  lt;div class="title"gt;This is a celllt;/divgt;  lt;/divgt;  lt;div id="js" class="grid-cell"gt;  lt;textarea v-model="jsCode" name="" id="" cols="30" rows="10"gt;lt;/textareagt;  lt;div class="title"gt;This is a celllt;/divgt;  lt;/divgt;  lt;div id="preview" class="grid-cell"gt;  lt;div v-html="htmlandcss"gt;lt;/divgt;  lt;div class="title"gt;This is a celllt;/divgt;  lt;/divgt;  lt;/divgt; lt;/templategt;  

И мой сценарий выглядит так:

 lt;scriptgt; export default {  name: "CodeEditor",  methods: {},  data() {  return {  htmlCode: 'lt;h1gt;hilt;/h1gt;',  cssCode: '',  jsCode: '',  htmlandcss: this.htmlCode   this.cssCode  }  },[![this is ][1]][1]  computed: {  } }; lt;/scriptgt;   

Мой результат в самом редакторе кода должен выглядеть как h1.

Это мой результат на данный момент:

https://i.stack.imgur.com/J25qW.png

Сделайте переменную результата вычисляемым свойством, и проблема исчезнет:

 lt;scriptgt; export default {  name: "CodeEditor",  methods: {},  data() {  return {  htmlCode: 'lt;h1gt;hilt;/h1gt;',  cssCode: '',  jsCode: '',  }  },  computed: {  htmlandcss() {  return this.htmlCode.concat(this.cssCode);  } }; lt;/scriptgt;