Nativescript Vue 简单示例 create() mounted() 从不触发

15 浏览
0 Comments

Nativescript Vue 简单示例 create() mounted() 从不触发

下面是一个非常简单的Nativescript Vue示例程序。如下所示，它显示了5个帖子标题的列表。\n因此，如果我只使用computed来将数据返回给模板，那么上述测试是有效的。然而，如果我尝试使用create()或mounted()事件/生命周期钩子来设置posts属性，那么在显示中将什么都没有。console.log行永远不会显示消息，因此它们永远不会被触发。为什么呢？\n另外，如果我尝试使用fetch（调用我的fetchPosts()方法）从测试restapi获取帖子，我将得不到任何数据，且console.error也不显示任何内容。为什么呢？\n\n\n

\n

0

2 答案

0 Comments

问题原因：

问题出现的原因是在Nativescript Vue中，mounted()和created()钩子函数在某些情况下可能不会触发。

解决方法：

一种解决方法是通过在页面元素上添加loaded事件来代替mounted()或created()钩子函数。

具体代码如下：

通过在页面元素上添加loaded事件，当页面加载完成时，会触发startMyApp()方法，从而达到与mounted()或created()类似的效果。这样可以确保代码在页面加载完成后执行。

0
0 Comments

Nativescript Vue简单示例create() mounted()不触发的问题及解决方法

在以上代码中，我发现了一些问题：

  1. 正确的生命周期钩子名称是created，而不是create
  2. posts列表应该在data中：

    data() {
    return {
        posts: []
    };
},

  3. fetchPosts()没有返回任何内容，但你希望返回posts。你需要在then回调中设置posts:

    fetchPosts() {
    fetch("https://jsonplaceholder.typicode.com/posts")
        .then(res => res.json())
        .then(res => this.posts = res)
        .catch(err => console.error(err));
}

    这是因为fetch返回一个Promise。问题：如何从Promise返回数据？答案：你不能！

完整代码：

<script>
export default {
    data() {
        return {
            posts: [{
                title: '1 Title',
                id: 1
            }]
        };
    },
    created() {
        console.log("create事件触发");
        this.posts = this.fetchPosts();
    },
    mounted() {
        console.log("mounted事件触发");
        this.fetchPosts();
    },
    methods: {
        fetchPosts() {
            return fetch("https://jsonplaceholder.typicode.com/posts")
                .then(res => res.json())
                .then(res => this.posts = res);
        }
    }
};
</script>

该代码已在此处进行了测试。

谢谢。它起作用了。我接受了你的答案。我想最后一部分是你上面提到的第2点。我的data()设置不正确。此外，我无法看到（在我键入时仍然无法看到）在VS Code中触发的生命周期钩子。但是我确实在Nativescript Sidekick中看到了设备控制台输出。所以我已经解决了问题。谢谢Jorj！

有趣的一点：你不能从promise.then返回res/data，并在mounted()中设置this.posts = this.fetchPosts()。那样是不起作用的。你必须在promise.then中设置this.posts = res才能起作用。为什么是这样？

不要在上面的“有趣的一点”中纠结。这一点也不有趣:-/你可以简单地返回promise，然后在mounted()中catch promise.then。我认为应该可以。我现在来试一下。应该能正常工作。

0