如何在 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"

  },

]

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

createNewPricedRoundShareholder() {

 this.shareholders.push({

    username: "Username",

    investment: "Investment"

  },

}

Answer 1

dynamic: true您可以在添加项中添加额外的属性：this.shareholders.push({&nbsp; username: "Username",&nbsp; investment: "Investment",&nbsp; dynamic: true})并在显示输入时检查它：<div>&nbsp; &nbsp;<input v-model="shareholder.username" :name="`shareholders[${index}][username]`" type="text" class="form-control input" >&nbsp; &nbsp;<i v-if="shareholder.dynamic" class="fa fa-plus-circle fa-lg" /></div><div>&nbsp; &nbsp;<input v-model="shareholder.investment" :name="`shareholders[${index}][investment]`" type="text" class="form-control input" >&nbsp; &nbsp;<i v-if="shareholder.dynamic" class="fa fa-plus-circle fa-lg" /></div>