Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>Form Builder</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/app.css">
​
</head>
<body>
<div class="container">
​
    <div class="row" id="app">
​
        <div class="col-md-8">
            <form class="form-horizontal">
                <my-component :showname="element.showname" :type="element.type" :name="element.name" :count="vm.count" v-for="element in elements"></my-component>
                <pre>{{ $data | json }}</pre>
                </form>
        </div>
​
        <div class="col-md-4">
            <div id="add_buttons">
                <p>
                <button @click="add_text_input" class="btn btn-primary">New Text Input Field</button>
                </p>
                <p>
                <button @click="add_text_area_input" class="btn btn-primary">New Text Area Field</button>
                </p>
            </div>
            <div id="features" class="row">
                <my-features :showname.sync="element.showname" :type="element.type" :name="element.name" :count="vm.count" v-for="element in elements"></my-features>
            </div>
        </div>
​
​
    </div>
​
</div>
<template id="my-form">
    <div v-if="type == 'text'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">{{ showname }}:</label>
        <div class="col-md-8">
            <input type="text" v-bind:name="name" class="form-control">
        </div>
        <div class="col-md-1">
            <button class="btn" v-on:click="edit('element')">Edit</button>
        </div>
    </div>
​
    <div v-if="type == 'textarea'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">{{ showname }}:</label>
        <div class="col-md-9">
            <textarea v-bind:name="name" class="form-control"></textarea>
        </div>
    </div>
</template>
​
<template id="my-features">
    <div v-if="type == 'text'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">Label:</label>
        <div class="col-md-9">
            <input type="text" v-model="showname">
        </div>
    </div>
​
    <div v-if="type == 'textarea'" class="form-group">
        <label v-bind:for="name" class="col-md-3 control-label">{{ showname }}:</label>
        <div class="col-md-9">
            <textarea v-bind:name="name" class="form-control"></textarea>
        </div>
    </div>
</template>
​
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.min.js"></script>
<script>
    
</script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers