VueとVueの入力が遅い

Question

私はVue MaterialでVueJs 2.0を使用しています。私は、複数の入力フィールドや選択フィールド（VueMaterialコンポーネント）を含むかなり数行のテーブルをレンダリングしています。

入力にデータを入力するとき、コンポーネントは非常に遅くなります。この問題をよりよく説明するために、live demo on JSFiddleがあります。

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> 

テキスト入力に入力するときに文字を維持してください。行数が増えても、通常の入力はかなり遅くなります。

これを修正する方法はありますか？

Answer 1

Vue-Materialに問題があるようです。このために既にログに記録されているバグがあります。 https://github.com/marcosmoura/vue-material/issues/544

Answer 2

2番目の選択ボックスを削除するように見えます（an updated demoを参照）。

本当に2つの同じ選択ボックスが必要ですか？

<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> 
      {{ item.number }} 
     </td> 
     </tr> 
    </tbody> 
    </table> 

</div>