I've been attempting to utilize a computed value in a v-select component from Vuetify, but every time I select an item, it triggers an endless loop.
To demonstrate the issue, I have recreated my code in this CodePen. Please be cautious as it may cause your browser to freeze.
HTML Code
<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 selecting a value :)"
chips
tags
:items="items">
</v-select>
</v-card-text>
</v-card>
</v-app>
</div>
JS Code
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}})
}
}
}
})
What's the best approach to resolve this issue and prevent the infinite loop?