老师，关于登录时的内容不能为空，我这里是出了什么问题呀？

<template>

 <div class="wrapper">

   <img class="wrapper_img" src="http://www.dell-lee.com/imgs/vue3/user.png" alt="头像">

   <div class="wrapper_input">

     <input

     class="wrapper_input_content"

     type="text"

     placeholder="用户名"

     v-model="username"

     >

   </div>

   <div class="wrapper_input">

     <input

     class="wrapper_input_content"

     type="password"

     placeholder="请输入密码"

     v-model="password"

     >

   </div>

   <div class="wrapper_login-button" @click="handelLogin">登录</div>

   <div class="wrapper_login-link" @click="hanelClickRegister">立即注册</div>

 </div>

 <Toast v-if="show" :message = "toastMessage"/>  

</template>

<script>

import {reactive,toRefs} from 'vue'

import {useRouter} from 'vue-router'

import {post} from '../../utils/request'

import Toast,{useToastEffect} from '../../components/Toast.vue'

//登录相关的逻辑

const useLoginEffect = (showToast) => {

 //定义路由

 const router = useRouter()

 const data = reactive({

   username:'',

   password:''

 })

 const handelLogin = async ()=>{

   try {

     const {username,password} = data

     if(username === '' && password === ''){

       return showToast('用户名及密码不能为空!')

     }

     const result = await post('/api/user/login',{

     username:data.username,

     password:data.password

     })

     if(result?.errno === 0){

       localStorage.isLogin = true

       router.push({name:'Home'})

     }else{

         showToast('登录失败')

     }

   } catch (error) {

     showToast('请求失败')

   }

 }

 const {username,password} = toRefs(data)

 return{username,password,handelLogin}

}

//Register路由跳转的相关逻辑

const useRegisterClick = ()=>{

 const router = useRouter()

 //Register的跳转路由

 const hanelClickRegister = ()=>{

   router.push({name:'Register'})

 }

 return {hanelClickRegister}

}

export default {

 name:'Login',

 components:{

   Toast

 },

 setup() {

   //使用Toast

   const {show,toastMessage,showToast} = useToastEffect()

   //使用login相关逻辑

   const {username,password,handelLogin} = useLoginEffect(showToast)

   //使用Register相关逻辑

   const {hanelClickRegister} = useRegisterClick()

   //返回所有的const

   return {

     username,password,

     show,toastMessage,

     handelLogin,hanelClickRegister

     }

   }

 }

</script>

<style lang="scss" scoped>

.wrapper{

 position: absolute;

 top: 50%;

 left: 0;

 right: 0;

 transform: translateY(-50%);

 &_img{

   width: 0.66rem;

   height: 0.66rem;

   display: block;

   margin: 0 auto 0.4rem auto;

 }

 &_input{

   padding: 0 .16rem;

   line-height: .48rem;

   box-sizing: border-box;

   background: #F9F9F9;

   border: 1px solid rgba(0,0,0,0.10);

   border-radius: 6px;

   height: 0.48rem;

   margin: 0 .4rem .16rem .4rem;

   &_content{

     border: none;

     background: none;

     outline: none;

     line-height: .48rem;

     width: 100%;

     font-size: .16rem;

     color: #1c1c1c;

     &::placeholder{

       color: rgba(0,0,0,0.50);

     }

   }

 }

 &_login-button{

   background: #0091FF;

   box-shadow: 0 4px 8px 0 rgba(0,145,255,0.32);

   border-radius: 4px;

   line-height: .48rem;

   margin: .2rem .4rem .16rem .4rem;

   color: white;

   font-size: .16rem;

   text-align: center;

 }

 &_login-link{

   text-align: center;

   color: rgba(0,0,0,0.50);

   font-size: .14rem;

 }

}

</style>

问题描述：

老师，我这里点击限制已经生效了，但是不是我所设置的showToast

用户名及密码不能为空的内容，提示的是下边showToast的登录失败，这是为什么呀