如何在 Vue.js 中动态添加字体真棒图标

Posted 2023-02-16

【中文标题】如何在 Vue.js 中动态添加字体真棒图标

【英文标题】：How to add a font awesome icon dynamically in Vue.js

【发布时间】：2021-03-13 06:18:54

【问题描述】：

我有两个输入位于模态框和一个按钮，当用户单击它时会生成另外两个输入。它有效，但我想在两个输入旁边添加一个很棒的字体图标，仅用于动态创建的输入，我怎样才能在 Vue 中实现这一点？到目前为止，这是我的代码：

<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>

我的数据：

shareholders: [
  
    investment: "Investment",
    username: "Username"
  ,
]

以及我的添加按钮的功能：

createNewPricedRoundShareholder() 
 this.shareholders.push(
    username: "Username",
    investment: "Investment"
  ,

【参考方案1】：

您可以在添加内容中添加额外的属性dynamic: true：

this.shareholders.push(
  username: "Username",
  investment: "Investment",
  dynamic: true
)

并在显示输入时检查它：

<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>