[英]How to add a font awesome icon dynamically in Vue.js
I have two inputs positioned in a modal and a button that generates two more inputs when the user clicks on it.我有两个输入位于模态中,一个按钮在用户单击它时会生成另外两个输入。 It works but I want to add a font awesome icon next to the two inputs only for the dynamically created inputs, how can I achieve this in Vue?
它可以工作,但我想在两个输入旁边添加一个字体真棒图标,仅用于动态创建的输入,我怎样才能在 Vue 中实现这一点? Here is my code so far:
到目前为止,这是我的代码:
<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>
my data:我的数据:
shareholders: [
{
investment: "Investment",
username: "Username"
},
]
and the function for my add button:和我的添加按钮的 function :
createNewPricedRoundShareholder() {
this.shareholders.push({
username: "Username",
investment: "Investment"
},
}
You could add an extra property dynamic: true
to the additions:您可以添加一个额外的属性
dynamic: true
添加:
this.shareholders.push({
username: "Username",
investment: "Investment",
dynamic: true
})
and check for it when showing the inputs:并在显示输入时检查它:
<div>
<input v-model="shareholder.username" :name="`shareholders[${index}][username]`" type="text" class="form-control input" >
<i v-if="shareholder.dynamic" class="fa fa-plus-circle fa-lg" />
</div>
<div>
<input v-model="shareholder.investment" :name="`shareholders[${index}][investment]`" type="text" class="form-control input" >
<i v-if="shareholder.dynamic" class="fa fa-plus-circle fa-lg" />
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.