Dropdown - Bootstrap-Vue
https://bootstrap-vue.github.io/docs/components/dropdowns
by batcave
HTML
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div id="app">
newEntries: {{ newEntries }}
<table>
<tr v-for="(fund, index) in defaultFunds">
<td>{{ fund.name }}</td>
<td>
<input v-model="newEntries[index].id" name="entryFund" :value="fund.id" type="text" />
</td>
<td>
<input v-model="newEntries[index].amount" name="entryFund" type="text" />
</td>
</tr>
</table>
</div>
CSS
#app {
padding: 20px;
height: 350px;
}
JavaScript
new Vue({
el: "#app",
data: function() {
return {
defaultFunds: [
{
id: 100,
name: 'fund 0'
},
{
id: 101,
name: 'fund 1'
}
],
newEntries: [{}, {}]
}
},
methods: {
}
});