vue使用v-for动态加载input， 第一次输入时会失去焦点，随后正常运行

  • Z时代
  • 2024-03-06
  • 分类：IT

有个需求，后台传来一个字符串，中间包含占位符，根据占位符替换为自定义组件，在html中渲染，现在代码如下 :

                                <div class="cs-check-item-row-cell" style="width: 15%"><component v-for="html in item.dataSourceDescribe" :key="html" :is="renderHtml(html,item)"></component></div>
                                <div class="cs-check-item-row-cell" style="width: 30%"><component v-for="html in item.kpiIndexDescribe" :key="html" :is="renderHtml(html,item)"></component></div>
                                <div class="cs-check-item-row-cell" style="width: 10%"><component v-for="html in item.checkScopeDescribe" :key="html" :is="renderHtml(html,item)"></component></div>
                                <div class="cs-check-item-row-cell" style="width: 20%"><component v-for="html in item.calcScoreDescribe" :key="html" :is="renderHtml(html,item)"></component></div>
    computed: {
        renderHtml() {
            return function (param,item) {
                return {
                    template:`<div class="item-content-span">${param}</div>`,
                    props:{
                        item:{
                            type:null,
                            default:() =>{return item}
                        }
                    },
                    created() {
                        console.log('a')
                    }
                }
            }
        },

}

结果input在第一次输入时会失焦，经查询 renderHtml会走一遍created：
param如下：准确档案数/档案总数，满分   <gdv-input v-model="item['calcScoreValue']['calcScoreValue']" validate="noZeroNum required"></gdv-input>   分
页面展示如下vue使用v-for动态加载input， 第一次输入时会失去焦点，随后正常运行
之后如标题所示，第一次输入时，会失焦，第二次输入时，不会失焦，求大佬给解决办法

以上是 vue使用v-for动态加载input， 第一次输入时会失去焦点，随后正常运行 的全部内容， 来源链接： utcz.com/p/935442.html

回到顶部