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

Question

I have a firstName and a lastName input field and want to concat both at the name input field, e.g.

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

If I modify the value of the firstName or lastName field, the name input field should update the result.

I have a script which fill the firstName and the lastName fields with data from a GET request.

<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>

I know that I cannot use v-bind and v-model together. But how could I solve this issue?

Boussadjra Brahim · Accepted Answer · 2021-07-29T09:50:44.407

1

Create a computed property called fullName with getter/setter then bind it to the 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 />

edited Jul 29 '21 at 09:50

answered Jul 29 '21 at 09:12

Boussadjra Brahim

82,684
19
144
164

Thanks. But I have still the problem, that if I change the value for e.g. ``firstName``, the value from ``name`` doesn't change. – ikreb Jul 29 '21 at 09:37
you should replace `:value` by `v-model` in other inputs – Boussadjra Brahim Jul 29 '21 at 09:43
It works now. But I get the warning that val is unused. How could I make this more pretty? – ikreb Jul 29 '21 at 09:57
1

you could do `set(_){` or `set(){` – Boussadjra Brahim Jul 29 '21 at 10:03

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

1 Answers1