j***@163.com
j***@163.com
  • 发布:2022-10-14 14:37
  • 更新:2022-10-18 14:42
  • 阅读:724

【报Bug】UniApp项目使用Vue3编译,微信小程序里提交表单(Form),组件使用behaviors: ['uni://form-field']依然无法获取到值.

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.4

第三方开发者工具版本号: 1.06.22

基础库版本号: 2.26.2

项目创建方式: HBuilderX

示例代码:

组件代码:

    <view><input v-model="inputValue" @input="onInput" name="age" placeholder="输入信息" /></view>  
</template>  

<script>  
export default {  
    name: 'wk-input-test',  
    behaviors: ['uni://form-field', 'wx://form-field-group'],  
    emits: ['input'],  
    data() {  
        return { inputValue: '' };  
    },  
    methods: {  
        onInput(e) {  
            this.$emit('input', e.detail.value);  
        }  
    }  
};  
</script>  

<style lang="scss"></style>

页面代码:

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{ title }}</text>  
        </view>  
        <form @submit="formSubmit">  
            <input name="name" placeholder="输入名称" />  
            <wk-input-test name="age"  v-model="age"></wk-input-test>  

            <button form-type="submit">确定</button>  
        </form>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello',  

            age: '',  
            nickname: ''  
        };  
    },  
    onLoad() {},  
    methods: {  
        formSubmit(e) {  
            console.info(JSON.stringify(e.detail.value));  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  
</style>

操作步骤:

直接复制代码运行,项目选择使用vue3编译

预期结果:

点击确定按钮后能打印出对象{name:'',age:''};

实际结果:

日志只能打印出:{name:''};

bug描述:

UniApp项目使用Vue3编译,微信小程序里提交表单(Form),组件使用behaviors: ['uni://form-field']依然无法获取到值.
同一个项目选择使用vue2编译,在小程序的form表单里提交(submit)后可以获取到组件内input的name和value,但是选择使用Vue3编译就无法获取,

2022-10-14 14:37 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

问题复现,已转相关人员排查,已加分感谢反馈!

DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX3.6.7-alpha已修复

该问题目前已经被锁定, 无法添加新回复