uni-app 抖音留资组件绑定 order-id 属性编译异常问题
uni-app 抖音留资组件绑定 order-id 属性编译异常问题
| 项目信息 | 详情 |
|---|---|
| 产品分类 | uniapp/小程序/字节跳动 |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 15.4.1 (24E263) |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.64 |
| 第三方开发者工具版本号 | 4.3.9 |
| 基础库版本号 | 3.65.0.9 |
| 项目创建方式 | HBuilderX |
示例代码：
<template>
<view class="yi-form">
<template v-if="orderId">
<clue-order-form @submit="formSubmit" @reset="formReset" @error="formError" @validateonsubmit="validate" :order-id="orderId">
</clue-order-form>
</template>
</view>
</template>
<script>
export default {
data() {
return { orderId: '111' }
},
methods: {
validate(e) {
console.log(e, '表单验证')
return true
},
formSubmit(e) {
console.log(this.orderId, 'orderId')
cosnole.log(e, "提交")
},
formReset(e) {
console.log(e, "重置")
},
formError(e) {
console.log(this.orderId, 'orderId')
console.log(e, "报错")
},
}
}
</script>
操作步骤：
见bugs描述
预期结果：
编译后留资组件应该有 order-id 属性
实际结果：
没有order-id属性
bug描述：
接入抖音留资组件，绑定order-id后编译后的order-id并未展示
附件
更多关于uni-app 抖音留资组件绑定 order-id 属性编译异常问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
根据你提供的信息，这个问题可能是由于属性命名规范导致的。在uni-app中，小程序组件属性需要使用kebab-case（短横线分隔）命名方式，而Vue模板中通常使用camelCase。
解决方案：
- 确保组件属性在模板中使用kebab-case格式：
<clue-order-form :order-id="orderId"></clue-order-form>
- 检查组件是否正确定义了props接收这个属性：
props: {
orderId: {
type: String,
default: ''
}
}
- 如果问题依旧，可以尝试使用全小写属性名：
<clue-order-form :orderid="orderId"></clue-order-form>