Question

编辑：请参阅下面有关将元素添加到Vue模板的评论

今天再次编辑：好的，这实际上是导致this.$navigateTo停止工作的原因... 如果我导入服务以对Friends中的rest api发出http调用.vue在Mounted（）事件中获取数据，这导致this.$navigateTo从调用Home.vue停止工作。有人可以建议原因吗？

这是在Friends.vue中...

    mounted() {
    console.log(`${this.codeFile}: mounted() fired`);
    httpService.getAllFriends((data, err) => {
        this.friends = data;
        if (err) {
            console.error(
                `${this.codeFile}: mounted: getAllFriends: `,
                err
            );
        }
    });
},

我真的觉得我的代码看起来像文档一样，但是我的this.$navigateTo(Friends)什么也没做。我可以看到console.log消息很好，但是页面没有改变。我在文档中没有看到什么？

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Home"></ActionBar>
        <ScrollView>
            <StackLayout backgroundColor="#3c495e">
                <Label
                    text="Friends"
                    @tap="gotoFriendsPage()"
                    height="70"
                    backgroundColor="#43b883"
                />
                <Label text="Places" height="70" backgroundColor="#289062"/>
                <Label text="Messages" height="70" backgroundColor="#1c6b48"/>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
import Friends from "./Friends";

export default {
    data() {
        return {
            codeFile: "Home.vue",
            friendsPage: Friends
        };
    },
    created() {
        //console.log(`${this.codeFile}: created() fired`);
    },
    mounted() {
        //console.log(`${this.codeFile}: mounted() fired`);
    },
    computed: {},
    methods: {
        gotoFriendsPage: function() {
            console.log(`${this.codeFile}: gotoFriendsPage fired`);
            this.$navigateTo(Friends);
        }
    }
};
</script>

<style scoped lang="scss">
// Start custom common variables
@import "../_app-variables.scss";
// End custom common variables

// Custom styles
.action-bar {
    background-color: $blue-dark;
    color: $blue-light;
}
.body {
    color: gray;
}
.fa {
    color: $accent-dark;
    font-size: 16;
}
.col-text {
    text-align: left;
    margin-bottom: 3;
    padding: 5;
}
.col-title {
    text-align: left;
    margin-bottom: 0;
    padding: 5;
    padding-bottom: 0;
    font-weight: bold;
}
.info {
    font-size: 20;
}
</style>

编辑：添加app.js

    import Vue from "nativescript-vue";
import Home from "./components/Home";

const template = `
    <Frame>
        <Home />
    </Frame>
`;

new Vue({
    template: template,
    components: {
        Home
    },
    mounted: function () {
        //console.log('app.js mounted fired...');
    },
    created: function () {
        //console.log('app.js created fired...');
    }
}).$start();

Answer 1

您如何实例化vue？您是否添加了这样的框架？

// Start
new Vue({
    store,
    render: h => h("frame", [h(store.getters.isLoggedIn ? routes.Home : routes.Login)])
}).$start();

Answer 2

Nativescript似乎会在某些代码错误时静默失败。我已经搜索了构建输出，它没有捕获丢失的module.exports。似乎构建过程应该抓住这一点。对？您看到此问题的唯一方法是this.$navigateTo，如果您在加载和调用模块的目标页面上遇到此代码错误，将无提示地失败。超级奇怪。

请参见以下NS游乐场。查看http-service.js。请注意，module.exports缺少getAllFriends导出。这是看不见的问题。请更正module.exports，一切正常。

https://play.nativescript.org/?template=play-vue&id=NnHdbs&v=8

希望这对以后有所帮助。

Nativescript Vue this。$ navigateTo不执行任何操作

2 个答案: