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“属性，但是当用户单击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;
}

你应该能让它发挥作用。