Hey there, I'm just starting out with nativescript vue and I have a question regarding a simple "toggle" feature that I'm trying to implement. Essentially, when a button is pressed, I want the background color to change.
<template>
<Page class="page">
<ActionBar title="Settings">
</ActionBar>
<StackLayout orientation="vertical" class="page-content">
<StackLayout orientation="horizontal" class="nix">
<StackLayout :class="{ active: isMaleActive }" ref='layoutMale' class="btn-img" orientation="vertical" padding="10" @tap="onTappedGender('male')" >
<Image src="~/assets/images/male.png" />
<Label text="Male" verticalAlignment="center"></Label>
</StackLayout>
<StackLayout :class="{ active: isFemaleActive }" ref='layoutFemale' class="btn-img" orientation="vertical" padding="10" @tap="onTappedGender('female')" >
<Image src="~/assets/images/female.png" />
<Label text="Female" verticalAlignment="center"></Label>
</StackLayout>
</StackLayout>
</StackLayout>
</Page>
</template>
<script>
export default {
data: {
isMaleActive: false,
isFemaleActive: false,
},
name: 'settings-view',
methods: {
onTappedGender(gender){
//console.log(gender);
if (gender == "male") {
this.isMaleActive = true;
this.isFemaleActive = false;
} else {
this.isMaleActive = false;
this.isFemaleActive = true;
}
console.log(this.isMaleActive);
}
},
}
</script>
<style scoped>
ActionBar {
background-color: #53ba82;
color: #ffffff;
}
.btn-img{
border-radius: 5;
border-width: 1;
color: white;
margin: 10;
font-size: 22;
border-color: #2b3c6a;
height: 80;
width: 80;
}
.active{
background-color: blue;
}
</style>Any thoughts or suggestions on how I can improve this code? All feedback is greatly appreciated. Thank you!