计算属性资源库创建超出的 Maximus 堆栈

Question

我有这样的代码：

<div id="app">
<b-form-group label="Sorting">
<b-form-checkbox-group
v-model="sorting"
:options="filterData.sorting"
/>
</b-form-group>
</div>
new Vue({
el: '#app',
computed: {
sorting: {
get: function () {
return this.filterInput.sorting
},
set: function (value) {
// this array needs to always have only one value
this.filterInput.sorting = [value[0]]
}
}
},
data () {
return {
filterData: {
sorting: ['PRICE_ASC', 'PRICE_DESC']
},
filterInput: {
sorting: []
}
}
}
})

https://jsfiddle.net/pum86bsx/1/

错误似乎在计算的 getter 中。当我把它注释掉时，一切都很好。我不知道为什么会这样。

Answer 1

您设置 v 模型的值(在 getter 中返回的值(，这将导致 setter 再次触发.. 一次又一次..导致堆栈溢出。

使用复选框

您可以改用@change事件，该事件应仅在值实际更改时触发。

new Vue({
el: '#app',
data () {
	return {
	filterData: {
	sorting: ['PRICE_ASC', 'PRICE_DESC']
},
filterInput: {
	      sorting: []
}
}
},
methods: {
	onChange(value) {
	if(value.length === 0) {
				this.filterInput.sorting = value
} else {
	this.filterInput.sorting = [value[value.length - 1]]
}
}
}
})

<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label="Sorting">
<b-form-checkbox-group
v-model="filterInput.sorting"
:options="filterData.sorting"
@change="onChange"
></b-form-checkbox-group>
</b-form-group>
</div>

使用单选按钮

或者，您可以使用单选按钮，一次只允许选择一个，因此您不必自己处理。

new Vue({
el: '#app',
data () {
	return {
	filterData: {
	sorting: ['PRICE_ASC', 'PRICE_DESC']
},
filterInput: {
	      sorting: []
}
}
}
})

<link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.15.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form-group label="Sorting">
<b-form-radio-group
v-model="filterInput.sorting"
:options="filterData.sorting"
></b-form-radio-group>
</b-form-group>
</div>