In my Vue modal, I have two inputs along with a button that adds two more inputs dynamically when clicked. Everything is functional, but I want to include a font awesome icon next to the dynamically created inputs. How can I achieve this in Vue? Here's what my code looks like:
<div class="price-round-creation-containe" v-for="(shareholder, index) in shareholders" :key="index">
<div>
<input v-model="shareholder.username" :name="`shareholders[${index}][username]`" type="text" class="form-control input" >
</div>
<div>
<input v-model="shareholder.investment" :name="`shareholders[${index}][investment]`" type="text" class="form-control input" >
</div>
</div>
<p
class="add-new-shareholders-p"
@click="createNewPricedRoundShareholder"
>
<i class="fa fa-plus-circle fa-lg" />ADD NEW SHAREHOLDER
</p>
Here's the data structure:
shareholders: [
{
investment: "Investment",
username: "Username"
},
]
And this is the function linked to the add button:
createNewPricedRoundShareholder() {
this.shareholders.push({
username: "Username",
investment: "Investment"
},
}