3

The text field is somewhat like this:

<v-text-field v-model="input" placeholder="(0 - 200)">
</v-text-field>

Vue.js data contains:

export default {
data () {
    return {
        input: '',
        proposed: 0  
        }
    }
}

I'd like the placeholder to display something like this:

placeholder="Proposed quantity: 2 (0 - 200)"

Tried setting the proposed variable with e.g.:

a) placeholder="Proposed quantity: {proposed} (0 - 200)"
b) placeholder="Proposed quantity: `${proposed}` (0 - 200)"
c) placeholder="Proposed quantity: " + proposed + " (0 - 200)"

and none worked.

Any other ideas and suggestions?

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
AbreQueVoy
  • 1,748
  • 8
  • 31
  • 52

1 Answers1

6

You have to bind the placeholder to your data object using : or v-bind:placeholder ... like :

  :placeholder="'Proposed quantity: '+proposed+ ' (0 - 200)'"

or 

  v-bind:placeholder="'Proposed quantity: '+proposed+ ' (0 - 200)'"
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164