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

问题描述

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

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

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

我有一个脚本，用来自 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``。但是我该如何解决这个问题？

解决方法

使用 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 />