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"

Incogitable

Answer 1

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%;"
/>

Multivocal

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 ]]". – Multivocal