Nativescript Vue ListPicker 不更新它的项目

Question

我正在尝试从后端加载主题（只是字符串值）并将它们显示在 ListPicker 中。但是 ListPicker 不会更新它应该显示的项目。

代码如下：

<template>
    <Page>
        <ActionBar title="Create Challenge" icon="">
            <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="goBack" />
        </ActionBar>

        <StackLayout>
            <Label text="TOPIC" class="fab lblSubTitle"/>
            <ListPicker :items="topics" v-model="selectedItem" />
            <Button text="check" @tap="checkIt" />
        </StackLayout>

    </Page>
</template>

<script>

    import {ObservableArray} from 'tns-core-modules/data/observable-array';
    import {FirebaseService} from '../../services/firebase-service';

    export default {

        data() {
            return {
                selectedItem: 0,
                topics: new ObservableArray(["some", "hardcoded", "items"])
            };
        },
        methods: {
            goBack() {
                this.$navigateBack();
            },
            checkIt() {
                this.topics.push("new item");
            }
        },
        created() {
            console.log("Create Challenge - Loading Topics")

            // Fetch additional items from the Firebase DB
            FirebaseService.fetchTopics().then(result => {
                result.forEach(topic => {
                    this.topics.push(topic);
                });
            });
        }
    }
</script>


<style scoped>
    .lblSubTitle {
        font-size: 15;
        margin: 10dp;
        color: red;
    }
</style>

因此 FirebaseService.fetchTopics() 返回一个字符串数组。这工作得非常好，并将接收到的值添加到 ObserveableArray topics。
但是 ListPicker 仅显示硬编码的值。不是动态添加的。 checkIt() 方法也不会更新视图。

我已尝试将 topics 更改为常规数组，但没有任何效果。

Link to the Playground

NativeScript 版本：6.5.0
Android 设备：Pixel 2 - Android 9

Answer 1

ListPicker 不会监听 ObservableArray 上的更改。您必须使用一个简单的数组并改变更改

this.topics = [...this.topics, "new item"];