this is a part of my code.

    <input type="text" v-model="formData.end_date" name="end_date" v-validate="'required'"
           v-bind:class="{'input-error' : errors.has('end_date')}">
    <span v-show="errors.has('end_date')"
          style="position: absolute; font-size: .7em ; margin-right: 1em;color: rgb(214, 48, 49);">{{errors.first('end_date') }}</span>
</div>

how can I add placeholder dynamically when error.has('end_date') return true

I try v-bind: placeholder

this is a part of my code.

    <input type="text" v-model="formData.end_date" name="end_date" v-validate="'required'"
           v-bind:class="{'input-error' : errors.has('end_date')}">
    <span v-show="errors.has('end_date')"
          style="position: absolute; font-size: .7em ; margin-right: 1em;color: rgb(214, 48, 49);">{{errors.first('end_date') }}</span>
</div>

how can I add placeholder dynamically when error.has('end_date') return true

I try v-bind: placeholder

• javascript
• vue.js

Share Improve this question Follow asked Sep 20, 2018 at 13:48 movAhedmovAhed 7311 gold badge22 silver badges1515 bronze badges 1

• You can also use <input :placeholder="[[ urlPlaceholder ]]"> – Carca Commented Feb 21, 2020 at 13:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try something like this:

1) Add a puted property to your ponent

puted: {
   placeholder() {
      return this.errors.has('end_date') ? 'Your placeholder text' : ''
   }
}

2) Bind to your puted placeholder property with v-bind:placeholder="placeholder"

you can get that done by saying :placeholder. Is that not working for you ? In your try you have a space between v-bind:placeholder. I think you should not be having that.

<input
   type="text"
   v-model="FirstName"
   class="form-control"
   :placeholder="functionData"
/>

puted:{
   functionData(){
     return "Data"
  }
}