Skip to content

Instantly share code, notes, and snippets.

@reasdom
Created April 13, 2019 11:11
Show Gist options
  • Save reasdom/411821cede3e54ccdf0ee82b78216119 to your computer and use it in GitHub Desktop.
Save reasdom/411821cede3e54ccdf0ee82b78216119 to your computer and use it in GitHub Desktop.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"
crossorigin="anonymous">
</head>
<body>
<div class="container" id="app">
<h1>Items</h1>
<div class="table-responsive">
<table class="table table-striped table-hover" id="itemTable">
<thead class="thead-dark">
<tr>
<th scope="col">Order</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :id="`item-${index}`">
<td scope="col">{{ item.order }}</td>
<td scope="col">{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<button v-on:click="addItem" class="btn btn-secondary">+ Item</button>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment