I'm using VueJs 2.0 with Vue Material. I'm rendering a table with quite a few rows that contains multiple input fields and/or select fields (VueMaterial components).
When entering data into the inputs the components becomes quite slow. Here is a live demo on JSFiddle to better demonstrate the issue.
Vue.use(VueMaterial);
Vue.material.registerTheme('default', {
primary: 'indigo',
accent: 'indigo',
warn: 'red',
background: 'white'
});
new Vue({
el: '#app',
beforeUpdate: function() {
console.log('Rerendering');
console.log(this);
},
data: {
countries: [{
id: "CAN",
value: "CAN"
}, {
id: "UAE",
value: "UAE"
}, {
id: "UK",
value: "UK"
}, {
id: "USA",
value: "USA"
}, {
id: "ZA",
value: "ZA"
}],
tableData: [{
id: 1,
name: 'Name 1',
number: Math.random(),
country: 'ZA'
}, {
id: 2,
name: 'Not another name',
number: Math.random(),
country: "UK"
}, {
id: 3,
name: 'One more name',
number: Math.random(),
country: "UAE"
}, {
id: 4,
name: 'Another name',
number: Math.random(),
country: "USA"
}, {
id: 5,
name: 'Another name',
number: Math.random(),
country: "CAN"
}, {
id: 6,
name: 'Another name',
number: Math.random()
}, {
id: 7,
name: 'Another name',
number: Math.random()
}, {
id: 8,
name: 'Another name',
number: Math.random()
}, {
id: 9,
name: 'Another name',
number: Math.random()
}, {
id: 10,
name: 'Another name',
number: Math.random()
}, {
id: 11,
name: 'Another name',
number: Math.random()
}, {
id: 12,
name: 'Name 1',
number: Math.random()
}, {
id: 13,
name: 'Not another name',
number: Math.random()
}, {
id: 14,
name: 'One more name',
number: Math.random()
}, {
id: 15,
name: 'Another name',
number: Math.random()
}, {
id: 16,
name: 'Another name',
number: Math.random()
}, {
id: 17,
name: 'Another name',
number: Math.random()
}, {
id: 18,
name: 'Another name',
number: Math.random()
}, {
id: 19,
name: 'Another name',
number: Math.random()
}, {
id: 20,
name: 'Another name',
number: Math.random()
}, {
id: 21,
name: 'Another name',
number: Math.random()
}, {
id: 22,
name: 'Another name',
number: Math.random()
},
]
}
});
<div id="app">
<table>
<tbody>
<tr v-for="(item, rowIndex) in tableData" :key="item.id">
<td>
<md-input-container>
<md-input type="text" v-model="item.name" />
</md-input-container>
</td>
<td>
<md-select v-model="item.country">
<md-option v-for="option in countries" :value="option.id">
{{ option.value }}
</md-option>
</md-select>
</td>
<td>
<md-select v-model="item.country">
<md-option v-for="option in countries" :value="option.id">
{{ option.value }}
</md-option>
</md-select>
</td>
<td>
{{ item.number }}
</td>
</tr>
</tbody>
</table>
</div>
Try keeping a letter in when typing in the text input. With more rows even normal typing gets quite slow.
Any idea how to fix this?
It seems the problem is with Vue-Material. There is already a bug logged for this. https://github.com/marcosmoura/vue-material/issues/544