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 ){ ... }
    }
}

所以“列表”对象不包含“toggled”属性，但我试图在用户单击 UI 中的项目时展开/折叠“desc”区域。

我的代码按原样返回 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;
}

你应该能够让它工作。