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...

Caleb Porzio · Accepted Answer · 2015-11-03 05:44:01Z

2

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: ''
        }
    })

answered Nov 3, 2015 at 5:44

Caleb Porzio

1512 silver badges6 bronze badges

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

Comments

Milkmannetje · Accepted Answer · 2015-11-02 23:12:25Z

0

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();
    }
  }
});

answered Nov 2, 2015 at 23:12

Milkmannetje

1,1812 gold badges10 silver badges36 bronze badges

Collectives™ on Stack Overflow

Bind an inputbox one-way to another in VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related