vue.jsvue-material

Slow inputs with Vue and Vue Material


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?


Solution

  • It seems the problem is with Vue-Material. There is already a bug logged for this. https://github.com/marcosmoura/vue-material/issues/544