Вставка поля данных в компонент vue

Question

Я нахожусь в процессе создания сайта vue.js, который служит внутренним хранилищем кода для моего офиса. Моя цель - создать несколько страниц, которые будут предварительно просматривать внешний вид блока кода, а под ним будет текстовая область с кодом, необходимым для его копирования / вставки.

В идеале я хотел бы использовать только одно поле данных, содержащее блок HTML, чтобы я мог разместить его на своем сайте дважды; один раз за пределами текстовой области, чтобы просмотреть, как он выглядит, и один раз за пределами текстовой области, чтобы пользователь скопировал

Я пытался поместить тег компонента v-html или <copycode></copycode> в кодированный код <textarea> в HTML, но любой контент внутри него будет отображаться до того, как vue сможет заменить его, как элементы показано в примере.

В демонстрации, представленной ниже, у меня есть компонент vue, разделенный на три соединенные строки. Есть ли способ заменить среднюю строку (code goes here) на поле данных sampleCode в новом значении под ним?

Vue.component('copycode', {
  template: '<textarea id="codeblock01">' + '(code goes here)' + '</textarea>',
});

new Vue({
  el: '#app',
  data: {
    sampleCode: 
    `<table>
      <tr>
      	<td>
      		<p>Content Block Demo</p>
      	</td>
      </tr>
     </table>`,
  }
});

body {
  font-family: 'arial', 'helvetica', sans-serif;
}

table {
  width: 500px;
  margin-bottom: 15px;
  background: red;
  color: #fff;
}

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  
  <!--renders the code I wish to demo from vue data-->
  <span v-html="sampleCode"></span>
  
  <!--renders the textarea that will allow users to easily copy the code-->
  <copycode></copycode>

</div>

поле данных sampleCode в новом значении под ним?

Answer 1

Если вы хотите, чтобы компонент знал о элементе данных, вам нужно передать элемент в качестве реквизита . Затем вы можете просто использовать фигурные скобки, чтобы вставить их в текстовую область, как в примере ниже.

Если вы хотите, чтобы изменения в текстовой области отображались в родительском элементе, вам нужно генерировать и обрабатывать входные события . Приведенный ниже пример этого не делает.

Vue.component('copycode', {
  template: '<textarea id="codeblock01">{{value}}</textarea>',
  props: ['value']
});

new Vue({
  el: '#app',
  data: {
    sampleCode: 
    `<table>
      <tr>
      	<td>
      		<p>Content Block Demo</p>
      	</td>
      </tr>
     </table>`,
  }
});

body {
  font-family: 'arial', 'helvetica', sans-serif;
}

table {
  width: 500px;
  margin-bottom: 15px;
  background: red;
  color: #fff;
}

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="app">
  
  <!--renders the code I wish to demo from vue data-->
  <span v-html="sampleCode"></span>
  
  <!--renders the textarea that will allow users to easily copy the code-->
  <copycode :value="sampleCode"></copycode>

</div>