0

我是一个新手，正在探索 Vue Native 上的 Navivebase 组件，我正在尝试使用一个复选框，我将 Nativebase 组件与 Vue Native 组件混合在一起。它工作正常，直到我喜欢代码的事件处理函数，我无法弄清楚如何去做，我附上了下面的代码

<template>
  <view class="container">
    <view>
    
    <text class="text-header">Register</text>

	    <text-input
	        class="text-input-login"
	        v-model="firstname" placeholder="email"
	      />

	    <text-input
	        class="text-input-login"
	        v-model = "lastname" placeholder="password"
	      />
      <text-input
        class="text-input-login"
        v-model = "email" placeholder="password"
      />

      <text-input
          class="text-input-login"
          v-model = "pwd" placeholder="password"
      />

      

       <touchable-opacity class = "button-container" v-bind:on-press="handleBtnPress">
          <text class="button-login">Register</text>
      </touchable-opacity>

      <nb-container class="check-box">
        <nb-checkbox :checked="agreeTnC" onPress= {this.handleCheckBox()} />
      </nb-container>

  	</view>
  </view>
</template>

<script type="text/javascript">
 
import {APIService} from './APIService';

const apiService = new APIService();

export default {
  data: function() {
    return {
      firstname:'',
      lastname:'',
      email:'',
      pwd:'',
      agreeTnC:false,
    };
  },
  methods: {
    handleBtnPress: function() {
   
      apiService.authenticate(this.email,this.pwd).then((data) => {

        console.log(data);

        result = data['result'];

        if(result == 'failed') {
          alert('Login failed, please retry with correct username and password');
        }
        
      });

    },
    handleCheckBox: function() {
        this.agreeTnC = !this.agreeTnC
    }
  }
};
</script>



<style>
.container {
  flex: 1;
  background-color: #4b4463;
  align-items: center;
  justify-content: center;
}
.button-container {
  
  align-items: center;
  justify-content: center;
  width:300;
  height: 40;

  background-color: #4b4463;
  border-color: white;
  border-width: 2;

  margin-top: 30;

  margin-bottom: 100;
}
.text-color-primary {
  color: white;
  font-size: 20;
  margin-bottom: 10;

}

.text-header {

  color: white;
  font-size: 40;
  justify-content: center;
  text-align: center;
  margin-bottom: 50;

}
.text-input-login {

	background-color: white;
	height: 40;
	width: 300; 

	font-size: 20;
	margin-bottom: 20;

}
.button-login {
    
    color: white;
    background-color: #4b4463;
}

.check-box {
    
    width: 200;
    height: auto;
    background-color: #4b4463;

}
</style>

单击复选框时出现以下错误

在此处输入图像描述

4

2 回答 2

0

以下事情对我有用

handleChange() {
    this.agreeTnC = !this.agreeTnC;

}

并且组件声明也以这种方式更改

 <nb-checkbox :checked="agreeTnC" :onPress="handleChange">
  </nb-checkbox>
于 2019-11-14T10:08:42.353 回答
0

onPress= {this.handleCheckBox()} onPress 接受函数值有错误，但您正在调用函数并提供值。所以它变成onPress= {undefined}了 which 不是一个函数。

更改onPress= {this.handleCheckBox()}为onPress= {this.handleCheckBox}（不带括号），它应该是固定的。

于 2019-11-14T08:30:28.493 回答