计算的属性设置器创建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.netpum86bsx1。

错误似乎是在计算的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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>