UchihaSasuke
UchihaSasuke
  • 发布:2019-12-25 10:04
  • 更新:2019-12-25 13:28
  • 阅读:118

【报Bug】H5端使用jsx 语法, render函数生成的dom不会被正确渲染到页面里

分类:HBuilderX

详细问题描述

在.vue文件里如此写render函数, 并无报错,但是在页面的dom结构里找不到生成的form

[内容]

<template></template>  

export default {  
name:"FormA",  
    data() {  
      return {  
          _return_url:https://'www.baidu.com',  
          action:'www.baidu.com',  
     fields:[  
                          {  
                           name:'username',  
                           value:'张三'  
                          },  
                          {  
                           name:'password',  
                           value:'123456'  
                          }  
                       ]  

      }  
    },  
render(createElement) {  
        return createElement(  
            'form',  
            {  
                attrs:{  
                    action:this.action  
                },  
                // style:{  
                //  display:'none'  
                // }  
            },  

                this.fields.map(item => {  
                    return createElement('input',{  
                        attrs:{  
                            type:'text',  
                            name:item.name,  
                            value:item.value  
                            }  
                    })  
                }).concat([ createElement('input',{  
                        attrs:{  
                            type:'text',  
                            name:'return_url',  
                            value:this._return_url  
                            }  
                    })])  

        )  
    },  
}

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明] HBuilderX 2.4.6.20191210

[运行端是h5或app或某个小程序?] h5

2019-12-25 10:04 负责人:无 分享
已邀请:
UchihaSasuke

UchihaSasuke (作者)


toPay(){  
    console.log('html0',document.querySelector('#alipay')); // <uni-view data-v-4e4cbd54="" data-v-97230c48="" id="alipay"></uni-view>  
    console.log('html1',document.querySelector('#alipay').innerHTML); // 没任何信息输出  
}  
</script>

经过测试: 使用 document.querySelector('#alipay').innerHTML
pc环境:

uniappH5环境:

结论是: uniapp的dom对象没有innerHTML属性,

所以: 我的h5端支付宝支付怎么做?
图片可能对应不起来, 因为无法方法, 根本原因是你们的编辑器不支持复制粘贴图片(吐槽)

  • DCloud_UNI_WYQ

    你这么写不还是对应uni-app的form组件吗,用document直接插入试试。uni-app不可能去修改原生的dom方法,innerHtml没东西里面应该就是真的没东西

    2019-12-25 13:31

  • UchihaSasuke (作者)

    回复 DCloud_UNI_WYQ: 现在好了, 不知道今早是哪里的问题,导致生成的dom无法插入到innerHTML里,

    2019-12-25 14:29

IT_梅

IT_梅 - 一个前端开发者

//从接口达到数据后,直接调用下方代码即可  
document.getElementsByTagName('body')[0].innerHTML += 后台返回的html代码;  
document.getElementsByTagName('form')[0].submit();

要回复问题请先登录注册