layui弹窗中content的文本框中读取数据

Question

使用layui表单处理数据，点击查看时跳出弹框并获取当前行的数据，如何在content的文本框中得到数据，我使用了点击事件，已经能得到相应数据，但是无法将值赋给content的文本框中，如何解决。
代码如下：
<template>

    <div style="width:100%;height:100%;" class="layui-tab-brief">
    <ul class="layui-tab-title site-demo-title" style="margin-bottom:10px;">
        <li class="layui-this">用户</li>
    </ul>
    <div style="margin:10px;">
        <router-link :to="{path:'/List1/Add'}" class="layui-btn layui-btn-small">
            <i class="layui-icon"></i> 添加
        </router-link>
    </div>
    <fieldset class="layui-elem-field">
        <legend>用户列表</legend>
        <div class="layui-field-box">
            <table>
                <thead slot="thead">
                    <tr>
                        <th>序号</th>
                        <th width="180">用户名</th>
                        <th>所在部门</th>
                        <th>角色</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody slot="tbody">
                    <tr v-for="item in users">
                        <td>{{item.num}}</td>
                        <td>
                           {{item.name}}
                        </td>
                        <td>{{item.part}}</td>
                        <td>{{item.source}}</td>
                        <td>
                            <button class="layui-btn layui-btn-small" :onclick="'javascript:layer.msg('+item.num+')'"><i class="layui-icon"></i></button>
                            <button class="layui-btn layui-btn-danger layui-btn-small" :onclick="'javascript:layer.msg('+item.num+')'"><i class="layui-icon"></i></button>
                            <button class="layui-btn" @click="openEditLayer(item)">查看</button>
                        </td>
                    </tr>
                </tbody>
              </table>
        </div>
    </fieldset>  
<div id="details" style="display: none;padding: 20px;">
    <div class="details-info">
        <label>用户名</label>
        <input type="text"  id="username"/>
    </div>
    <div class="details-info">
        <label>所在部门</label>
        <input type="text" v-bind:readonly="readonly" id="userdepartment"/>
    </div>
    <div class="details-info">
        <label>角色</label>
        <input type="text" v-bind:readonly="readonly" id="userRole"/>
    </div>
</div>
</div>

</template>
<script>
export default{

    data(){
        return{
            users:[
            {num:1,name:'111',part:'人事',source:'百度',url:'www.baidu.com'},
            {num:2,name:'222',part:'人事',source:'知乎',url:'www.baidu.com'},
            {num:3,name:'333',part:'人事',source:'知乎',url:'www.baidu.com'},
            {num:4,name:'444',part:'人事',source:'知乎',url:'www.baidu.com'},
            {num:5,name:'555',part:'人事',source:'知乎',url:'www.baidu.com'},
            {num:6,name:'666',part:'人事',source:'知乎',url:'www.baidu.com'}
            ],
            readonly:true,
        }
    },
    methods:{
        openEditLayer(obj){
            layer.alert(JSON.stringify(obj));
            document.getElementById('username').value=obj.name;
            layer.open({
               title:'用户信息',
               type: 1,
               skin: 'layui-layer-rim', 
               area: ['500px', '300px'], 
               content: document.getElementById('details').innerHTML
           })
        }
        
    }

}
</script>
可以得到当前行的数据

但是content中无法读取到值

控制台打印值也为空

Answer 1

直接将html在content中拼接然后传值
openSearchLayer(obj){

            layer.open({
               title:'用户信息',
               type: 1,
               skin: 'layui-layer-rim', 
               area: ['500px', '300px'], 
               content:'<div id="details" style="padding: 20px;">'+
               '<div style="width:80%;margin:10px auto;">'+
               '<label style="width:27%;box-sizing:border-box;padding:5px;display:block;float:left;">用户名</label>'+
               '<input type="text" readonly="true" style="width:73%;box-sizing:border-box;padding:5px;display:block;" value='+obj.name+' /></div>'+
               '<div style="width:80%;margin:10px auto;">'+
               '<label style="width:27%;box-sizing:border-box;padding:5px;display:block;float:left;">所在部门</label>'+
               '<input type="text" readonly="true" style="width:73%;box-sizing:border-box;padding:5px;display:block;" value='+obj.part+' /></div>'+
               '<div style="width:80%;margin:10px auto;">'+
               '<label style="width:27%;box-sizing:border-box;padding:5px;display:block;float:left;">角色</label>'+
               '<input type="text" readonly="true" style="width:73%;box-sizing:border-box;padding:5px;display:block;" value='+obj.source+' /></div></div>'
           })
     },