NativeScript-Vue Update Data Object? - vue.js

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

Answer 1

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.