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

因此，“列表”对象不包含“已切换”属性，但是当用户单击UI中的项目时，我试图扩展/折叠“ desc”区域。

我的代码照原样确实以预期的方式返回e.item.toggled，但用户界面未更新
undefined -> true -> false -> true -> false -> ...

更新：

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

我还修改了如何将“已切换”属性修改为数据对象“列表”。通过直接添加，控制台将值显示为真实布尔值，而不是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更新数据对象？

1 个答案: