将两个或多个数据绑定到 VueJs 中的表单输入答案

【问题标题】：Binding two or more data to a form input in VueJs将两个或多个数据绑定到 VueJs 中的表单输入
【发布时间】：2020-01-30 12:21:25
【问题描述】：

我正在考虑在 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 内联中，但目前无法正确处理。

【问题讨论】：

您是要同时显示两个值还是显示一个已填充的值？
我尝试使用+ 连接v-model 属性内的两个值，但它会引发错误。
我建议在获取数据之后和显示数据之前连接两个道具，以便 v-model get 只是一个绑定
这个answer你的问题？
使用计算函数...

标签： javascript vue.js model-binding

【解决方案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()。你可以检查这个example。

祝你好运！

【讨论】：

[Vue warn]: Error in render: "TypeError: Cannot read property 'user' of undefined"
这个错误是因为嵌套的对象值，更多你可以阅读here。
您的代码没有错，但是即使this.asset isset 也会执行else块，并且可以显示在模板上。我找到了解决办法
你尝试过这样的事情吗：if (this.asset && this.asset.current_status && this.asset.current_status.user.last_name && this.asset.current_status.user.surname？
真的，是的。它返回 false。

【解决方案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>

【讨论】：