Browser can't load page when table rows contain lists #2744
Description
Description
As @rohitsathish noticed on #2697, the following minimal example causes the app to freeze:
ui.table(columns=[{'name': 'A', 'label': 'A', 'field': 'A'}], rows=[{'A': [1, 2, 3]}])It's even more apparent when creating the table dynamically:
ui.button('Table', on_click=lambda: ui.table(columns=[{'name': 'A', 'label': 'A', 'field': 'A'}], rows=[{'A': [1, 2, 3]}]))Somehow Vue and/or Quasar can't handle the row content. But a minimal Quasar app works with the same data:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/quasar@2.15.1/dist/quasar.prod.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="q-app">
<q-table :columns="[{'name': 'A','label': 'A','field': 'A'}]" :rows="[{'A': [1, 2, 3]}]" row-key="id" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.15.1/dist/quasar.umd.prod.js"></script>
<script>
const app = Vue.createApp({ setup() { return {}; } });
app.use(Quasar);
app.mount("#q-app");
</script>
</body>
</html>I'm out of ideas. Can anyone help to find out what's going on? Thanks!