title: Vue.js change placeholder of text input according to v-model value
body: <p>I need to change placeholder of a text input via Vue.js data binding. Here is my code.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;select2 :options=&quot;power_options&quot; v-model=&quot;power&quot;&gt;
      &lt;option selected value=&quot;hp&quot;&gt;hp&lt;/option&gt;
      &lt;option value=&quot;kW&quot;&gt;kW&lt;/option&gt;
  &lt;/select2&gt;
  
  &lt;input name=&quot;power_to&quot; type=&quot;text&quot; 
      class=&quot;form-control pwer_change&quot; v-model=&quot;power_from&quot;
      placeholder='[[ power ]]' style=&quot;display: inline;width: 48%;&quot;&gt;
  
  &lt;input name=&quot;power_from&quot; type=&quot;text&quot; 
      class=&quot;form-control pwer_change&quot; v-model=&quot;power_to&quot;
      placeholder=&quot;[[ power ]]&quot; style=&quot;display: inline;width: 48%;&quot;&gt;
  </code></pre>
  <p>Here is my vue code...</p>
  <pre class="lang-js prettyprint-override"><code>var vm = new Vue({
    el: '#el',
    delimiters: [&quot;[[&quot;, &quot;]]&quot;],
    data: {
      power: &quot;hp&quot;,
      power_from: null,
      power_to: null,
    },
    created() {
  
    },
    methods: {
  
    }
  });
  </code></pre>
  <p>I have changed <code>{{</code> delimiters to <code>[[</code> and using <code>select2</code> Wrapper Component. I need to change <code>power_to</code> and <code>power_from</code> input <strong>placeholders</strong> according to <code>v-model=&quot;power&quot;</code></p>