Read data in the text box of content in layui pop-up window

use the layui form to process the data, jump out of the pop-up box and get the data of the current row when you click to view, how to get the data in the content text box, I used the click event, I can already get the corresponding data, but can not assign the value to the content text box, how to solve. The
code is as follows:
< 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 >
you can get the data of the current row

clipboard.png
content

clipboard.png

clipboard.png

Jul.23,2021

splice html directly into content and pass the value
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>'
           })
     },
Menu