Nativescript Vue toggle button with v-bind
0
I'm new to nativescript vue and I have a question about a simple "toggle" i want to make. When i press a button, it should change the backgroundcolor.
I tried to make this happen with v-bind. I know that it isnt the most beautiful code... ;-)
<template>
<Page class="page">
<ActionBar title="Einstellungen">
</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="Männlich" 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="Männlich" 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>So, what is wrong with the code?
Thank you very much.
javascript vue.js toggle nativescript nativescript-vue
asked Nov 19 '18 at 7:51
ThandorThandor
157
add a comment |
0
I'm new to nativescript vue and I have a question about a simple "toggle" i want to make. When i press a button, it should change the backgroundcolor.
I tried to make this happen with v-bind. I know that it isnt the most beautiful code... ;-)
<template>
<Page class="page">
<ActionBar title="Einstellungen">
</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="Männlich" 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="Männlich" 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>So, what is wrong with the code?
Thank you very much.
javascript vue.js toggle nativescript nativescript-vue
asked Nov 19 '18 at 7:51
ThandorThandor
157
add a comment |
0
0
0
I'm new to nativescript vue and I have a question about a simple "toggle" i want to make. When i press a button, it should change the backgroundcolor.
I tried to make this happen with v-bind. I know that it isnt the most beautiful code... ;-)
<template>
<Page class="page">
<ActionBar title="Einstellungen">
</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="Männlich" 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="Männlich" 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>So, what is wrong with the code?
Thank you very much.
javascript vue.js toggle nativescript nativescript-vue
asked Nov 19 '18 at 7:51
ThandorThandor
157
I'm new to nativescript vue and I have a question about a simple "toggle" i want to make. When i press a button, it should change the backgroundcolor.
I tried to make this happen with v-bind. I know that it isnt the most beautiful code... ;-)
<template>
<Page class="page">
<ActionBar title="Einstellungen">
</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="Männlich" 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="Männlich" 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>So, what is wrong with the code?
Thank you very much.
<template>
<Page class="page">
<ActionBar title="Einstellungen">
</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="Männlich" 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="Männlich" 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><template>
<Page class="page">
<ActionBar title="Einstellungen">
</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="Männlich" 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="Männlich" 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>javascript vue.js toggle nativescript nativescript-vue
javascript vue.js toggle nativescript nativescript-vue
asked Nov 19 '18 at 7:51
ThandorThandor
157
asked Nov 19 '18 at 7:51
ThandorThandor
157
asked Nov 19 '18 at 7:51
ThandorThandor
157
asked Nov 19 '18 at 7:51
ThandorThandor
157
asked Nov 19 '18 at 7:51
ThandorThandor
157
157
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Within a Vue component, data should be a function that returns an object.
Playground sample
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
add a comment |
0
You can not write this because you bind class attribute and set it as static.
<StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >
What you need to do is :
<StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370371%2fnativescript-vue-toggle-button-with-v-bind%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Within a Vue component, data should be a function that returns an object.
Playground sample
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
add a comment |
1
Within a Vue component, data should be a function that returns an object.
Playground sample
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
add a comment |
1
1
1
Within a Vue component, data should be a function that returns an object.
Playground sample
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
Within a Vue component, data should be a function that returns an object.
Playground sample
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
answered Nov 19 '18 at 9:02
ManojManoj
6,0532922
6,0532922
add a comment |
add a comment |
0
You can not write this because you bind class attribute and set it as static.
<StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >
What you need to do is :
<StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
add a comment |
0
You can not write this because you bind class attribute and set it as static.
<StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >
What you need to do is :
<StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
add a comment |
0
0
0
You can not write this because you bind class attribute and set it as static.
<StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >
What you need to do is :
<StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
You can not write this because you bind class attribute and set it as static.
<StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >
What you need to do is :
<StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
answered Nov 19 '18 at 8:52
Duhoux Pierre-LouisDuhoux Pierre-Louis
1266
1266
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
add a comment |
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
thanks for the hint, but still no change of the background-color.
– Thandor
Nov 19 '18 at 9:02
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Actually you can have like that, an class attribute and v-bind on class together. The issue was data function.
– Manoj
Nov 19 '18 at 9:05
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
Didn't know, my eslint always complains about that. But effectively, data was not a function...
– Duhoux Pierre-Louis
Nov 19 '18 at 9:17
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370371%2fnativescript-vue-toggle-button-with-v-bind%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
