forms - vue.js：如何动态更改输入字段的值与其他内容的内容并仍在使用值？

Question

我有一个名字和一个姓氏输入字段，并希望在名称输入字段中连接两者，例如

<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-bind andv-model`。但是我怎么能解决这个问题呢？

Answer 1

创建一个fullName使用 getter/setter 调用的计算属性，然后将其绑定到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 />