如何在 Vue.js 中動態添加字體真棒圖標

Question

我有兩個輸入位於模態中，一個按鈕在用戶單擊它時會生成另外兩個輸入。 它可以工作，但我想在兩個輸入旁邊添加一個字體真棒圖標，僅用於動態創建的輸入，我怎樣才能在 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"
  },
]

和我的添加按鈕的 function ：

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

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