Привязка двух или более данных к форме ввода в VueJs

Question

Я рассматривал возможность иметь более одного значения в vue form input binding

Ниже приведен пример моего кода.

<template> 
  <div> 
    <label for=""> Employee </label>
    <input class="form-control-plaintext" v-model="asset.current_status.user.surname" type= "text" readonly name="surname">
  </div>
</template>

<script> 
  data(){
    return:{
      asset:{},
    }
  },

  methods:{
     getAsset(){
        axios.get('/api/assets/'+this.id)
          .then ( response => {
            this.asset = response.data.data[0].data; 
            this.toFill = this.asset()
            this.assetForm.fill(this.toFill)
           })
        },
  },

   mounted(){
        this.getAsset();
    }
</script>

v-model в настоящее время принимает и отображает одно значение фамилии, я считаю возможным включить другое значение asset.current_status.user.last_name во встроенное v-model, но в настоящее время не могу сделать все правильно.

Answer 1

Я думаю, вам нужно computed свойство, подобное этому:

computed: {
    surname () {
         if (this.asset.current_status.user.last_name 
             && this.asset.current_status.user.surname) {

         return this.asset.current_status.user.last_name 
                + this.asset.current_status.user.surname
         }

         return '' // or whatewer else you need...
    }
}

И установить v-model="surname".

Подробнее о computed .

Также, если вам нужно отредактировать этот ввод, вам понадобятся get() и set(). Вы можете проверить это пример для этого.

Удачи!

Answer 2

<template> 
  <div> 
    <label for=""> Employee </label>
    <input class="form-control-plaintext" :value="showAssignedUser()" type= "text" readonly name="surname">
  </div>
</template>

<script> 
  data(){
    return:{
      asset:{},
    }
  },

  methods:{
     getAsset(){
        axios.get('/api/assets/'+this.id)
          .then ( response => {
            this.asset = response.data.data[0].data; 
            this.toFill = this.asset()
            this.assetForm.fill(this.toFill)
           })
        },

    showAssignedUser(){
        return `${this.asset.current_status.user.surname}` + ' '+ `${this.asset.current_status.user.first_name}`
    },

  },

  mounted(){
     this.getAsset();
 }
</script>