[Vuejs]-How to change placeholder of an input based on select in Vue

by

1👍

✅

However you must use == or === instead of =, it will be better if we use a computed filed here as placeholder

<select class="form-control" id="platform" v-model="platform">
     <option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>

<input type="text" class="form-control" :placeholder="placeholder">

data() {
  return {
    platform: '',
    options: [
      { text: 'PSN', value: 'psn', placeholder: 'Enter PSN ID' },
      { text: 'Xbox Live', value: 'xbl', placeholder: 'Enter Origin ID' },
      { text: 'Origin', value: 'origin', placeholder: 'Enter Xbox Live Gamertag' }
    ]
  }
},
computed: {
  placeholder() {
    let selected = this.options.find(o => o.value === this.platform)
    return selected ? selected.placeholder : ''
  }
}

In this example, placeholder will be produced automatically.

👤talkhabi

Leave a comment