vue.js: 如何使用另一个输入字段的内容动态更改输入字段的值并仍然使用值？

Question

我有一个 firstName 和一个 lastName 输入字段，想在名称输入字段中连接这两个字段，例如

<input id="firstName" :value"firstName" />
<input id="lastName" :value"lastName" />
<input id="name" :value"{{ firstName }} {{ lastName }}" readonly />

如果我修改 firstName 或 lastName 字段的值，name 输入字段应该更新结果。

我有一个脚本，它用来自 GET 请求的数据填充 firstName 和 lastName 字段。

<script>
  export default {
    data () {
      return {
        data: {},
        firstName: "",
        lastName: "",
      },
    },
    methods: {
      getUser() {
        this.$axios({method: 'get', url: 'http://127.0.0.1:8000/api/get_user/',
      }).then(response => {
        this.data = response.data;
        this.firstName = this.data.firstName;
        }
      }
    }
  }
</script>

我知道我不能同时使用```v-bindandv-model``。但是我该如何解决这个问题呢？

Answer 1

使用 getter/setter 创建一个名为 fullName 的计算属性，然后将其绑定到 v-model :

    computed: {
      fullName: {
         get(){
            return this.firstName + ' ' + this.lastName;
         },
         set(val){
       
         }

    },

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

vue.js: 如何使用另一个输入字段的内容动态更改输入字段的值并仍然使用值？

vue.js: How to change dynamically the value of a input field with the content from an other and still use value?

forms

vue.js

vuejs3

vue-events