Bootstrap Vue Form

by Murat Kezli

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div id="app">
  <vuetextbox
    col="col-md-6"
    name="ilan-basligi"
    id="ilan-basligi"
    text="İlan Başlığı"
    ></vuetextbox>   
</div>
<div id="print" class="col-md-12 p-3">
dsada
</div>
<div id="test">

</div>

JavaScript

Vue.component('vuetextbox', {

    props:{
    col :{type: String, required: true,default:'col-md-12'},
    id :{type: String, required: true},
    name :{type: String, required: true},
    text: { type: String, required: true},
    req:{tyle: String, required:true,default:'col-md-12'}
    },
    
    data: {
        test:"sadsa"
    },
    template: `
    <div :class="col">

	<div class="form-group"> 
        <label class="control-label" :for="id" v-html="text"></label> 
        <input class="form-control input-lg" :name="name" :id="id" :data-validate="req"> 
    </div>
    </div> 
  `
});


var forms = new Vue({
    el: '#app',
    name:'Formlar'
   
});

$(document).ready(function(){

var print = $('#print'),
appHTML = $('#app').html(),
appHTMLDOM = $('#app').html[0];

$('#print').text(appHTML);
$('#test').appendTo(appHTMLDOM );
});