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.0Android设备：Pixel 2-Android 9

Answer 1

ListPicker不监听ObservableArray的更改。您必须使用简单的Array并更改更改。

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