我尝试在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}})
}
}
这是更新的笔:https://codepen.io/anon/pen/XewjdJ?editors=1010
关于javascript - VueJs在v-select中使用计算变量的无穷循环,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46890297/