NativeScript-Vue 更新数据对象？

Posted 2023-04-14

【中文标题】NativeScript-Vue 更新数据对象？

【英文标题】：NativeScript-Vue Update Data Object?

【发布时间】：2019-08-10 07:09:52

【问题描述】：

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

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

<RadListView for="item in list" @itemTap="accordion">
    <v-template>
        <StackLayout>
            <Label :text="item.title" />
        </StackLayout>
        <StackLayout v-bind:>
            <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:>
            <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;
        
    

【参考方案1】：

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

通过将item 传递到您的手风琴方法调用中：

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

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

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

你应该能够让它工作。

【讨论】：

我认为你让我走对了路（尽管）我不确定这是否是正确的方式——我将 @itemTap="accordion(item)" 移动到 StackLayout 元素——以及代码在哪里摄取外部数据，而不是为对象分配属性，我做了一个传播"toggled" : false, ...data - 然后将“切换”到 vue [getter/setter]

看起来它正在工作，但控制台让它看起来像是在触发一个完全重新绘制？

重绘整个数组？听起来很奇怪……你解决了吗？如果你能扔出一个代码笔，我可以检查一下！