我在vue中的datalist存在性能问题.js和谷歌Chrome(最新版本:83.0.4103.97).
firefox :https://streamable.com/vj4rbb
chromium :https://streamable.com/2sikq5
组件代码:
<b-input-group size="sm" v-if="menuEditState">
<b-form-input
:list="`mealDish${meal.id}`"
:id="`input${meal.id}`"
placeholder="Selectionner un plat"
v-model="name"
:class="{'is-invalid': $v.name.$anyError}"
/>
<datalist :id="`mealDish${meal.id}`">
<option v-for="dish in activeDishesByType" :value="`${dish.name} (${dish.humanType})`" :data-value="dish.id"></option>
</datalist>
<b-input-group-append>
<b-button variant="primary" @click="onClick" :disabled="loading">
<i :class="loading ? 'fa fa-spin fa-circle-notch' : 'fa fa-plus'" />
</b-button>
</b-input-group-append>
</b-input-group>
还有 playbook
computed: {
...mapGetters({
activeDishesByType: 'activeDishesByType',
}),
getter基于getter中的Vuex状态排序(如果使用状态而不使用getter排序,则具有相同的行为).
我知道chrome开发工具中有一个性能监视器,我试图找到一些可以帮助我解决这个问题的东西,但我不知道在哪里搜索所有这些信息.
谢谢你的帮助.
罗曼.