vue.js - 计算属性 setter 创建超出了 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-model 的值(在 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>