uniapp中data中的对象数据获取不到

Question

第一次使用uniapp，遇到个问题，我在点击事件login中用this.form去获取data中的对象数据form，获取到和日志一起打印，结果就是打印都不执行了，我单只是this.form获取不到数据，但是具体指向对象中的username就可以this.form.username，只是this.form就不行，这是为什么啊？

<template>
    <view class="body" :style="{height:height+'px'}">
        <img src="../../static/宠物市场logo.png" alt="">
        <view class="post">
            <input v-model="form.username" class="uni-input focus" maxlength="11" type="text" name="focus" focus placeholder="请输入账号" placeholder-style="color:#fff" />
            <input v-model="form.userpwd" class="uni-input password" name="password" password type="text" placeholder="请输入密码" placeholder-style="color:#fff" />
            <button size="default" type="default" 
                style="color:#ffffff;backgroundColor:#1AAD19;margin-top: 30upx;" 
                hover-class="is-hover" @tap="login">登录</button>
            <view class="txt">
                <view class="">
                    <text href="">人脸验证登录</text>
                </view>
                <view class="">
                    <text href="">初次登录，输入的账号密码默认创建账号</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {request} from '@/utils/request.js'
    export default {
        data() {
            return {
                form:{
                    username:'name',
                    userpwd:'123'
                }
                // height:uni.getSystemInfoSync().windowHeight-uni.upx2px(80),
            }
        },
        methods: {
            login:async function(){
                let form = this.form
                console.log('1111111111',form);
                const data = await request({url:'/login/post',method:'post',data:this.form})
                console.log('data',data);
            },
        },
        async created() {
            const res = uni.getSystemInfo({
               success:(res=>{
                      this.height = res.windowHeight
                })
            });
        }
    }
</script>

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

根据您提供的代码，我看到您的代码逻辑是没有问题的。通过v-model将input与form对象的属性进行了双向绑定，所以在点击事件login中，使用this.form可以获取到form对象的数据。

您遇到的问题可能是因为this.form在console.log前被赋值了新的对象，导致无法获取之前的数据。可以尝试添加一个临时变量来获取this.form的值并打印，例如：

login: async function() {
  let form = this.form;
  console.log('1111111111', form);
  const tempForm = this.form;
  console.log('tempForm', tempForm);
  const data = await request({ url: '/login/post', method: 'post', data: this.form });
  console.log('data', data);
},

您可以查看控制台日志，看是否能够正确打印form对象的数据。

另外，确保您在login方法中调用的request方法能够正常执行并返回数据。

希望能帮到您！如果您有任何其他问题，请随时问我。