Insert data into vue component

by James Connolly

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<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>

CSS

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

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

JavaScript

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>`,
  }
});