Vue.js如何用v-model、计算属性及复选框实现两个输入框内容镜像同步

问题根因 #

你当前的代码仅在两个输入框触发输入操作时才会执行同步逻辑，没有监听复选框的状态切换事件：当你重新勾选copy_chekcbox时，没有主动把账单地址的值同步为配送地址的值，因此出现账单内容没有回退的问题。

优化实现方案 #

不需要使用复杂的双计算属性逻辑，仅通过监听+事件触发即可实现需求，代码更简洁易维护：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 地址同步实现</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <p>Shipping details</p>
    <input v-model="shipping_data" type="text" />

    <p>Same as shipping: <input type="checkbox" v-model="copy_chekcbox" @change="syncWhenCheck" /></p>

    <p>Billing details</p>
    <input v-model="billing_data" type="text" :disabled="copy_chekcbox" />
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        shipping_data: '',
        billing_data: '',
        copy_chekcbox: true,
      },
      watch: {
        // 勾选状态下，修改配送地址自动同步到账单
        shipping_data(newVal) {
          this.copy_chekcbox && (this.billing_data = newVal)
        }
      },
      methods: {
        // 勾选复选框时立即同步一次地址
        syncWhenCheck() {
          this.copy_chekcbox && (this.billing_data = this.shipping_data)
        }
      }
    })
  </script>
</body>
</html>

功能验证 #

按照你给出的操作步骤测试，完全符合预期：

1. 配送详情输入ABC → 账单详情同步为ABC
2. 取消勾选复选框 → 账单输入框解锁可编辑
3. 账单详情输入123 → 两个输入框值独立不干扰
4. 重新勾选复选框 → 账单详情自动更新为配送地址的ABC
5. 后续修改配送地址时，账单地址会同步更新

内容的提问来源于stack exchange，提问作者imbuda