在 VueJS 中将一个输入框单向绑定到另一个输入框

Question

VueJS 中是否有一种将输入框绑定到另一个输入框的方法，但只有一种方法？

我想在打字时将 box1 复制到 box2。但是当我开始编辑 box2 时，我不想发生任何事情。（Box2 也有一个绑定到 VueJS 的另一个字段）

我现有的 jQuery on(click) 处理程序似乎被 Vue 否决了...

Answer 1

知道了 :) 只需为此功能添加一个方法。

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

Answer 2

将第一个盒子绑定到 v-model，然后将第二个盒子 "value" 绑定到 box1 的模型。您可以为 box2 提供自己的模型，它应该也能正常工作。

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

在 VueJS 中将一个输入框单向绑定到另一个输入框

Bind an inputbox one-way to another in VueJS

javascript

jquery

vue.js