gridlayout中的无效按钮-Nativescript-vue

Question

以下代码包含注销按钮，但该按钮无效。

<DockLayout class="screen" stretchLastChild="true">
<ScrollView dock="top">
    <StackLayout orientation="vertical">
        <GridLayout class="header" rows="auto" columns="*,auto,auto">
            <Label text="$124.57" row="0" col="0" verticalAlignment="center"></Label>
            <Image src="~/assets/images/search.png" verticalAlignment="center" marginRight="25" row="0" col="1" height="22" />
            <!-- <Image src="~/assets/images/header-cart.png" verticalAlignment="middle" marginRight="10" row="0" col="2" height="14" /> -->
            <Button class="logoutButton" text="Logout" fontSize="14" verticalAligment="middle" marginRight="10" row="0" col="2" @tap="logout()"/>
        </GridLayout>

service.js ：（此方法在操作栏中效果很好，因此我的设置没有问题）

logout() {
    return Parse.User.logOut();
}

vue组件中的方法：

logout() {
      this.$backendService.logout();

      this.$navigateTo(Login, {
        clearHistory: true
      });
    },

该类没有CSS，但是当我从按钮中删除该类时，没有任何更改。

在操作栏中使用相同的Button元素，可以完美地工作。网格布局有任何限制吗？按钮显示为文本，而不是按钮。

谢谢！