Vue.js change placeholder of text input according to v-model value

Question

I need to change placeholder of a text input via Vue.js data binding. Here is my code.

<select2 :options="power_options" v-model="power">
    <option selected value="hp">hp</option>
    <option value="kW">kW</option>
</select2>

<input name="power_to" type="text" 
    class="form-control pwer_change" v-model="power_from"
    placeholder='[[ power ]]' style="display: inline;width: 48%;">

<input name="power_from" type="text" 
    class="form-control pwer_change" v-model="power_to"
    placeholder="[[ power ]]" style="display: inline;width: 48%;">

Here is my vue code...

var vm = new Vue({
  el: '#el',
  delimiters: ["[[", "]]"],
  data: {
    power: "hp",
    power_from: null,
    power_to: null,
  },
  created() {

  },
  methods: {

  }
});

I have changed {{ delimiters to [[ and using select2 Wrapper Component. I need to change power_to and power_from input placeholders according to v-model="power"

dfsq · Accepted Answer · 2018-12-10 13:17:08Z

23

You should use placeholder property notation in this case :placeholder="[[ power ]]":

<input
  name="power_to"
  type="text"
  class="form-control pwer_change"
  v-model="power_from"
  :placeholder="[[ power ]]"
  style="display: inline;width: 48%;"
/>

answered Dec 10, 2018 at 13:17

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dfsq Over a year ago

you are welcome. In case if you need to add some static words to placeholder, the syntax needs to be this: :placeholder="'Enter value of ' + [[ power ]]".

Collectives™ on Stack Overflow

Vue.js change placeholder of text input according to v-model value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related