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

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

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

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

我有一个脚本,它用来自 GET 请求的数据填充 firstNamelastName 字段。

<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-bindv-model 。但是我怎么能解决这个问题呢?

stack overflow vue.js: How to change dynamically the value of a input field with the content from an other and still use value?
原文答案
author avatar

接受的答案

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

答案: