We have figured out a temporary solution on slack - wrap every v-for in a parent layout. Seems like multiple v-fors in the same block are not working, which is most likely related to #127 where v-if's in the same block produce the same issue.

We got exactly the same issue, but there is just one v-for.

Our app has a search page, where the first search without any filter gives roughly 138 results (all items) where results are rendered by:

<StackLayout>
    <StackLayout v-for="item in searchResults" :key="item.id" >
        <GridLayout class="result-row" rows="*" columns="*,*,*,*,*">
             <Label row="0" col="0" ..../>
             <Label row="0" col="1" ..../>
             <Label row="0" col="2" ..../>
             <Label row="0" col="3" ..../>
             <Label row="0" col="4" ..../>
        </GridLayout>
    </StackLayout>
</StackLayout>

A second search will hang the UI with exactly the same error.

The weird thing is when we do first search with some filter applied, and results count are roughly 50 rows, the next search won't hang and it works correctly as long as we don't do a search when no filter is applied.

There is only one v-for in <template> and it's already wrapped in a StackLayout.

Since repeated search (with some filter applied) always works correctly, and it only hangs when we do a search after a search without filter, which means listing all items. I start to suspect the :key. I then make :key="item.id + Math.random()" and it solves our issue. This just make sure the key is always different across searches.

However it introduces another minor issue. I run the app by npm run watch:ios with Vue.config.silent = false;. When doing a search without filter, webpack always crashes:

CONSOLE LOG '{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(Label)'
CONSOLE LOG '{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> SetAttribute(ElementNode(label), data-v-7cb41050, )'
CONSOLE LOG '{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> AppendChild(ElementNode(gridlayout), ElementNode(label))'
CONSOLE LOG '{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(Label)'
error: uncaughtException: 120 date=Fri Jun 15 2018 23:05:16 GMT+1000 (AEST), pid=47089, uid=501, gid=20, cwd=XXXXX, execPath=/usr/local/Cellar/node@8/8.11.2/bin/node, version=v8.11.2, argv=[/usr/local/Cellar/node@8/8.11.2/bin/node, ,XXXXX/node_modules/.bin/webpack, --watch, --env.tnsAction, run, --env.ios], rss=180903936, heapTotal=178057216, heapUsed=161481920, external=1783057, loadavg=[2.919921875, 2.9150390625, 2.884765625], uptime=226688, trace=[], stack=undefined

App continues to work correctly though.

Guess this might be related?

Edit: When commenting out Vue.config.silent = false line, npm run watch:ios won't crash anymore.. Is a 138-row result set where each one creates 5 Labels and 2 Layouts considered too much?

@starryalley interesting that setting the key to a random value solves this...

Is a 138-row result set where each one creates 5 Labels and 2 Layouts considered too much?

Yes, I would say that's too much, consider using a ListView, which in return would only create (depending on the visible area) about 10 rows with 5 labels, and as you scroll update them (view recycling).

That's 690 views vs ~50, quite a difference!

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.