NativeScript-Vue 更新数据对象？

Question

是否可以使用新的属性更新数据对象？

数据来自外部源，并且数据不包含是否显示对象内容的标志是合理的。

<RadListView for="item in list" @itemTap="accordion">
    <v-template>
        <StackLayout>
            <Label :text="item.title" />
        </StackLayout>
        <StackLayout v-bind:height="item.toggled? 'auto' : 0">
            <Label :text="item.desc" />
        </StackLayout>
    </v-template>
</RadListView>

export default{
    data(){
        return{
            list: [
                { "title" : "Sample Title", "desc" : "Lorem Ipsum" },
                { "title" : "New Title", "desc" : "Test 123 Test" }
            ]
        }
    },
    methods: {
        accordion: function(e){
            e.item.toggled = !e.item.toggled;
        },
        loadData: function(){ ... },
        generateData: function( data ){ ... }
    }
}

所以 'list' 对象不包含 "toggled" 属性，但我试图 expand/collapse 当用户点击 "desc" 区域UI.

中的一项

我的代码按原样按预期方式执行 return e.item.toggled 但 UI 不会更新
undefined -> true -> false -> true -> false -> ...

更新:

根据@sundeqvist 的建议，我通过手风琴方法传递了 item 元素。

我还修改了 "toggled" 属性修改为数据对象 "list" 的方式。通过直接添加它，控制台将值显示为真布尔值而不是 Vue [Getter/Setter] 值。

<RadListView for="item in list">
    <v-template>
        <StackLayout @itemTap="accordion(item)">
            <Label :text="item.title" />
        </StackLayout>
        <StackLayout v-bind:height="item.toggled? 'auto' : 0">
            <Label :text="item.desc" />
        </StackLayout>
    </v-template>
</RadListView>

export default{
    data(){
        return{
            list: [
                { "title" : "Sample Title", "desc" : "Lorem Ipsum" },
                { "title" : "New Title", "desc" : "Test 123 Test" }
            ]
        }
    },
    methods: {
        accordion: function(item){
            item.toggled = !item.toggled;
        },
        loadData: function(){ ... },
        generateData: function( data ){
            let dataArr = [];
            for( let d in data ){
                d = { "toggled" : false, ...d };
                dataArr.push( d );
            }
            this.list = dataArr;
        }
    }
}

Answer 1

您确定要在您的方法中访问 item 吗？

通过将 item 传入手风琴方法调用：

<RadListView for="item in list" @itemTap="accordion(item)">

然后在您的方法中切换您作为参数传入的项目上的 toggle 属性：

accordion(item) {
  item.toggled = !item.toggled;
}

你应该能够让它工作。

NativeScript-Vue 更新数据对象？

NativeScript-Vue Update Data Object?

vue.js

nativescript

nativescript-vue