vue 关于点击按钮时带参函数调用时遇到的问题

最新推荐文章于 2024-11-12 16:44:36 发布

尘埃落定wf

最新推荐文章于 2024-11-12 16:44:36 发布

阅读量559

点赞数

文章标签： javascript html5 vue.js

本文链接：https://blog.youkuaiyun.com/m0_46642164/article/details/120375651

版权

关于点击按钮时带参函数调用时遇到的问题

代码如下：

<template>
   <div id="loginform">
      <div class="" label="">
        <input  v-model="userName"  placeholder="请输入用户名">
        <input v-model="passWord" placeholder="请输入密码">
        <button @click="isLogin(userName,passWord)">登录</button>
      </div>
   </div>
</template>
<script>
  export default {
    name:'Reg',
    data() {
      return { 
          userName:'',
          passWord:''
      }
    },
    methods: {
      isLogin(_userName,_passWord ){
          console.log(_userName);
          this.$axios.get('api/getlist')
         .then(res=>{
            if((_userName==res.data.data[0].userName)&&(_passWord==res.data.data[0].passWord)){ 
                   alert("验证成功");
                   window.open("http://localhost:8080/home")
              }
            console.log(res);
          })
    }
  }
  }
</script>
<style scoped>
 input{ 
   display:block;
   margin-top:30px;
   margin-bottom:10px ;
   margin-left: 10px;
   margin-right:10px ;
   height:30px;
 }
 #loginform{ 
   position: absolute;
   left:50%;
   top: 50%;
   width: 200px;
   height: 300px;
   border: 1px solid blue;
   background: rgb(125, 141, 228);
 }
</style>

问题：
上面所示代码中当我们用@click=this.isLogin(参数1，参数2)；
会报错typeerror this is Null

改正后：将this去掉报错消失