Vuejs2 价值<；Vue组件中的输入未获取方法的值

我有一个用户列表。单击一个特定的用户，用户编辑表单将被填充，但我在输入中获取值的唯一方法是将返回值放入

如果我这样做

输入中没有显示任何内容

如果我使用v-model=“this.cl.data…”用户名的值在输入中，我不确定该值如何传递给updateUser（）函数，因为通常我会使用username=this.user\u name

使用apollo和Graphgl进行查询

编辑
从graphql标记导入gql{SCTY_ACCS_GRP，SCTY_ACCS_GRP_USER}
来自“/gqlquerys”
导出默认值{
数据：（）=>({
用户：[]，
cl:“，
用户表单：false，
用户名：“”
}),
方法：{
editForm:异步函数（用户ID）{
this.cl=wait this.$apollo.query（{query:SCTY\u ACCS\u GRP\u USER，变量：{id:userid}}）
this.user_form=true
console.log（this.cl）
警报（此.cl.data.USER\u RLTNP\u SCTY\u ACCS\u GRP[0]。用户名）
}, 
编辑用户（）{
this.user\u name=this.user\u name
警报（此.user\u名称）
}
},
已装入：异步函数（）{
this.users=wait this.$apollo.query（{query:SCTY\u ACCS\u GRP}）
//console.log（this.users.data.USER\u RLTNP\u SCTY\u ACCS\u GRP）
}   } 

我假设一旦触发

editForm（）

函数，

就会填充。那么，当单击editUser按钮时，如何获取用户名的值呢。 举个小例子：

var mapp=新的Vue({
el:“应用程序”，
数据：{
currentuserinfo:未定义，
用户：[
{姓名：“约翰·多伊”，身份证号码：12}，
{姓名：“黑杰克”，id:932}，
{姓名：“白杰克”，身份证号码：342}
],
用户信息：
[
{userid:12，favcolor:'green'，年龄：23}，
{userid:932，favcolor:'red'，年龄：11}，
{userid:342，favcolor:'blue'，年龄：12}
]
},
方法：
{
选择用户：功能（id）
{
//你的问题在这里
this.currentuserinfo=this.userinfo.filter（u=>u.userid==id）[0]；
}
}
})

td，th
{
填充物：5px；
边框：1px纯黑；
}

名称
选择用户
{{user.name}
选择用户
请选择一个用户
最喜欢的颜色：{currentuserinfo.favcolor}

年龄：{{currentuserinfo.Age}}

<template> 
  <div>   
  <v-text-field label="User Name" ref="User_Name" v-model="User_Name" v-bind:value="this.cl.data.USER_RLTNP_SCTY_ACCS_GRP[0].User_Name" id="" placeholder="User Name"></v-text-field> 
 <v-btn v-on:click="editUser()">Edit</v-btn>
</div>
</template>

<script>
import gql from graphql-tag import { SCTY_ACCS_GRP, SCTY_ACCS_GRP_USER }  
from './gqlqueries'

export default {

data: () => ({
    users: [], 
    cl: '',
    user_form: false, 
    user_name: ''

}),

methods: {
    editForm: async function(userid){ 
        this.cl = await this.$apollo.query({query : SCTY_ACCS_GRP_USER, variables:  {id : userid}})
        this.user_form = true
        console.log(this.cl)
        alert(this.cl.data.USER_RLTNP_SCTY_ACCS_GRP[0].User_Name)

    }, 
    editUser(){
        this.user_name = this.User_Name
        alert(this.user_name)
    }
},

mounted: async function() {
    this.users = await this.$apollo.query({ query: SCTY_ACCS_GRP })
  //  console.log(this.users.data.USER_RLTNP_SCTY_ACCS_GRP)
}   } 
</script>