带有 v-bind 的 Nativescript Vue 切换按钮答案

【问题标题】：Nativescript Vue toggle button with v-bind带有 v-bind 的 Nativescript Vue 切换按钮
【发布时间】：2018-11-19 07:51:00
【问题描述】：

我是 nativescript vue 的新手，我有一个关于我想做的简单“切换”的问题。当我按下一个按钮时，它应该改变背景颜色。我试图通过 v-bind 实现这一点。我知道这不是最漂亮的代码... ;-)

<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

【解决方案1】：

在 Vue 组件中，data 应该是一个返回对象的函数。

Playground sample

【讨论】：

【解决方案2】：

你不能写这个，因为你绑定了类属性并将它设置为静态。 <StackLayout :class="{ active: isMaleActive }" ... class="btn-img" >

你需要做的是： <StackLayout :class="[{ active: isMaleActive }, 'btn-img']" >

【讨论】：

感谢提示，但背景颜色仍然没有变化。
其实你可以有这样的，一个类属性和类上的v-bind。问题是数据功能。
不知道，我的 eslint 总是抱怨这个。但实际上，数据不是函数……