如何动态连接输入字段的值，实现即时更新？

2024-03-07 00:39:51

动态连接输入字段的值，实现即时更新

问题

在 Vue.js 中，我们有时需要将多个输入字段的值连接到一个只读的输入字段中。然而，使用 v-bind 和 v-model 同时绑定数据会引发冲突。

解决方法

利用 Vue.js 的计算属性，我们可以优雅地解决这个问题：

1. 创建计算属性：

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

2. 绑定计算属性：

<input id="name" v-model="fullName" readonly />

完整代码示例：

<template>
  <div>
    <input id="firstName" :value="firstName" />
    <input id="lastName" :value="lastName" />
    <input id="name" v-model="fullName" readonly />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        firstName: "",
        lastName: "",
      };
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  }
</script>

提示：

使用 watch 函数实现即时更新：

watch: {
  firstName: function() {
    this.updateFullName();
  },
  lastName: function() {
    this.updateFullName();
  }
},
methods: {
  updateFullName: function() {
    this.fullName = this.firstName + ' ' + this.lastName;
  }
}