我尝试在 v-select 中使用计算值(来自 vuetify),当我在 select 中选择一个值时,会出现无限循环。
我已经重现my dirty code in this pen来说明我的问题。请小心,这可能会阻止您的导航器。
HTML 代码
<div id="app">
<v-app id="inspire">
<v-card color="grey lighten-4" flat>
<v-card-text>
<v-select
v-model="select"
label="Be careful when select a value :)"
chips
tags
:items="items">
</v-select>
</v-card-text>
</v-card>
</v-app>
</div>
JS代码
new Vue({
el: '#app',
data () {
return {
obj: {
values: [{'name':'Testing'}]
},
items: [
'Programming',
'Design',
'Vue',
'Vuetify'
]
}
},
computed: {
select: {
get: function () {
return this.obj.values.map(val => val.name).sort()
},
set: function (chipsValues) {
this.obj.values = chipsValues.map(val => {return {'name': val}})
}
}
}
})
编写此行为的正确方法是什么?
最佳答案
一个快速修复方法是在设置 this.obj.values
之前验证是否获得任何新值。如果新值大于/小于旧值,可以设置,否则忽略。
由于 Javascript 是同步的,因此您只需检查数组的长度即可。
set: function (chipsValues) {
if( this.obj.values.length != chipsValues.length) {
this.obj.values = chipsValues.map(val => {return {'name': val}})
}
}
关于javascript - VueJs 在 v-select 中使用计算变量的无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46890297/