Bind an inputbox one-way to another in VueJS

Question

Is there in VueJS a way to bind an inputbox to another inputbox, but only one way?

I want to make a copy of box1 to box2 while typing. But when I start editing box2 I want nothing to happen. (Box2 also has a binding to another field with VueJS)

Seems that my existing jQuery on(click) handler is overruled by Vue...

Answer 1

Bind the first box to a v-model, then bind the second boxes "value" attribute the box1's model. You can give box2 its own model and it should work as well.

<div id="app">
    <input type="text" v-model="box1">
    <input type="text" v-model="box2" :value="box1">
</div>

 vm = new Vue({ el: '#app', data: { box1: '', box2: '' } }) 

Answer 2

Got it :) Just add a method for this feature.

<input v-model="productName" v-on:keyup="updateSKU" type="text">

---

new Vue({
  el: '#app',
  data : {
    productName : '',
    productSku : ''
  },
  methods : {
    updateSKU : function() {
      this.productSku = this.productName.toUpperCase();
    }
  }
});