NativeScript-Vue Update Data Object?

Question

Is it possible to update a data object with a new property?

The data is coming in from an external source, and justifiably the data does not contain a flag on whether or not to show the contents of the object.

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

So the 'list' objects do not contain a "toggled" property, but I am trying to expand/collapse the "desc" area when a user clicks on an item in the UI.

My code, as is, does return e.item.toggled in an expected fashion but the UI does not update
undefined -> true -> false -> true -> false -> ...

UPDATE:

Going off of @sundeqvist 's suggestion, I passed the item element through the method for accordion.

I also modified how the "toggled" property was amended to the data object, "list". By adding it directly, the console showed the value as a true boolean instead of a Vue [Getter/Setter] value.

<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;
        }
    }
}

sundeqvist sundeqvist · Accepted Answer · 2019-03-19T17:08:55

Are you sure you're accessing item in your method?

By passing in item into your accordion method call:

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

and then in your method toggle the toggle property on the item you pass in as a parameter:

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

you should be able to get it work.

NativeScript-Vue Update Data Object?

1 Answers