javascript - 将两个或多个数据绑定(bind)到 VueJ 中的表单输入

Question

我正在考虑在 vue 中拥有多个值 表单输入绑定(bind)

下面是我的代码示例。

<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: {
    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()。 您可以查看这个example为此。

祝你好运!