0

编辑：请参阅下面关于向 Vue 模板添加元素的评论

今天再次编辑：好的，这实际上是导致this.$navigateTo停止工作的原因......如果我导入一个服务以对 Friends.vue 中的一个休息 api 进行 http 调用以获取 mount() 事件中的数据，这会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();
4

2 回答 2

1

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

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

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

我希望这对以后的人有所帮助。

于 2019-02-11T18:39:59.140 回答
0

你是如何实例化vue的？你是这样添加框架的吗？

// Start
new Vue({
    store,
    render: h => h("frame", [h(store.getters.isLoggedIn ? routes.Home : routes.Login)])
}).$start();
于 2019-02-08T12:17:10.817 回答