CODEWITHSUNDEEP
htmlvue.js
user14543107
user14543107

Reputation: 117

How to show placeholder in dynamically created input field instead of name

I have two input fields inside of a form and a button. When the user clicks the button more input fields are being generated dynamically. It works great but the problem is that my inputs show their name values and it looks like they are pre-populated, which is not what I want, I just want them to show the placeholders instead. How can I show the placeholders instead and not display the name value?

Here is my HTML:

<div>
    <input 
        v-model="shareholder.username" 
        :name="`shareholders[${index}][username]`" 
        type="text" 
        class="form-control input" 
        placeholder="Username"
    >
</div>
<div>
    <input 
        v-model="shareholder.investment" 
        :name="`shareholders[${index}][investment]`" 
        type="text" 
        class="form-control input" 
        placeholder="Investment"
    >
    <i 
        v-if="shareholder.dynamic" 
        class="fas fa-trash"  
        @click="deleteItem(index)"
    />
</div>

My data:

shareholders: [
    {
        investment: "Investment",
        username: "Username",
        dynamic: false
    },
],

and the way new fields are generated:

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

Upvotes: 0

Views: 186

Answers (1)

Herbert Lago
Herbert Lago

Reputation: 343

When you do .push in your shareholders array, you are sending a populated data for username and investment, try to do your .push with empty values like this.

    createNewPricedRoundShareholder() {
      this.shareholders.push({
        username: "",
        investment: "",
        dynamic: true
      })
  },

Upvotes: 1

Related Questions