Простой пример Nativescript Vue create () mount () никогда не запускается

Question

Ниже приведен очень простой пример Vativescript Vue с самого начала.Как показано ниже, он отображает список из 5 заголовков сообщений.

Так что вышеописанный тест можно начинать, пока я использую только computed для возврата данных в шаблон.Однако, если я попытаюсь использовать хуки событий / жизненных циклов create() или mounted(), чтобы установить свойство posts, на экране ничего не появится.Строки console.log никогда не отображают сообщение, поэтому они никогда не запускают .Почему бы и нет?

Кроме того, если я попытаюсь использовать выборку (вызову моего метода fetchPosts()) для извлечения сообщений из тестового перезапуска, я не получаю данных, а console.error ничего не показывает.Почему нет?

<template>
<Page class="page">
    <ActionBar class="action-bar">
    <Label class="action-bar-title" text="Home"></Label>
    </ActionBar>
    <ScrollView>
    <StackLayout class="home-panel">
        <!--Add your page content here-->
        <Label v-for="post in posts" :text="post.title" :key="post.id"/>
    </StackLayout>
    </ScrollView>
</Page>
</template>

<script>
export default {
//   posts: [],
//   create() {
//     console.log("create event fired");
//     this.posts = this.getPosts();
//   },
//   mounted() {
//     console.log("mounted event fired");
//     this.posts = this.getPosts();
//   },
computed: {
    posts() {
    //return this.fetchPosts();
    return this.getPosts();
    }
},
methods: {
    fetchPosts() {
    fetch("https://jsonplaceholder.typicode.com/posts")
        .then(res => res.json())
        .then(res => {
        console.log("fetch response", res);
        return res;
        })
        .catch(err => {
        console.error(err);
        return [{ id: 0, title: "Error: " + err }];
        });
    },
    getPosts() {
    return [
        {
        userId: 1,
        id: 1,
        title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body:
            "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        {
        userId: 1,
        id: 2,
        title: "qui est esse",
        body:
            "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        },
        {
        userId: 1,
        id: 3,
        title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        body:
            "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        },
        {
        userId: 1,
        id: 4,
        title: "eum et est occaecati",
        body:
            "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
        },
        {
        userId: 1,
        id: 5,
        title: "nesciunt quas odio",
        body:
            "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
        }
    ];
    }
}
};
</script>

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

// Custom styles
.fa {
color: $accent-dark;
}

.info {
font-size: 20;
}
</style>

Answer 1

Для меня это тоже не стрельба, вместо использования смонтированного или созданного я добавил загруженное событие на элемент страницы

<template>
    <page @loaded="startMyApp">
    ......
</template>
<script>
  export default {
    data() {
      return {
      }
    },
   methods: {
        startMyApp()
        {
        }
  }
</script>

Answer 2

В вашем коде обнаружены некоторые проблемы:

1. правильное имя ловушки жизненного цикла: created, а не create

2. список postsдолжно быть внутри data:

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

3. fetchPosts() ничего не возвращает, но вы ожидаете вернуть posts.Вы должны установить posts внутри then обратного вызова:

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

   , и это потому, что fetch возвращает Promise.Q: Как вернуть данные с Promise?A: Вы не можете !

Полный код:

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

Код был проверен здесь .