Skip to content

Instantly share code, notes, and snippets.

@tristanbailey

tristanbailey/index.html

Created December 6, 2017 13:59
Show Gist options
  • Save tristanbailey/2d6eb1e4a335c490d623df63f7eabf01 to your computer and use it in GitHub Desktop.
Save tristanbailey/2d6eb1e4a335c490d623df63f7eabf01 to your computer and use it in GitHub Desktop.
Download ZIP
Vuejs add form rows
Raw
index.html
<html>
<head>
<meta charset="UTF-8" />
<title>Example Dynamic Form</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<style>
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 21px;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.fileContainer {
background: #E3E3E3;
float: left;
padding: .5em;
height: 21px;
}
.fileContainer [type=file] {
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<table class="table">
<thead>
<tr>
<td><strong>Title</strong></td>
<td><strong>Description</strong></td>
<td><strong>File</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows">
<td><input type="text" v-model="row.title"></td>
<td><input type="text" v-model="row.description"></td>
<td>
<label class="fileContainer">
{{row.file.name}}
<input type="file" @change="setFilename($event, row)" :id="index">
</label>
</td>
<td>
<a v-on:click="removeElement(index);" style="cursor: pointer">Remove</a>
</td>
</tr>
</tbody>
</table>
<div>
<button class="button btn-primary" @click="addRow">Add row</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
rows: []
},
methods: {
addRow: function() {
var elem = document.createElement('tr');
this.rows.push({
title: "",
description: "",
file: {
name: 'Choose File'
}
});
},
removeElement: function(index) {
this.rows.splice(index, 1);
},
setFilename: function(event, row) {
var file = event.target.files[0];
row.file = file
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment