Vue.js 计算属性设置程序创建的最大堆栈已超出

我有这样的代码：

<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: []
      }
    }
  }
})

新Vue({
el:“#应用程序”，
计算：{
分类：{
get:function（）{
返回此.filterInput.sorting
},
设置：函数（值）{
//此数组需要始终只有一个值
this.filterInput.sorting=[值[0]]
}
}
},
数据（）{
返回{
过滤器数据：{
排序：['PRICE\u ASC'，'PRICE\u DESC']
},
过滤器输入：{
排序：[]
}
}
}
})

---

错误似乎在计算getter中。当我把它评论出来时，一切都很好。我不知道为什么会这样。

您设置了v-model的值（getter中返回的值），这将导致setter再次启动。。再一次。。再一次。。导致堆栈溢出

使用复选框 您可以改为使用

@change

事件，该事件只应在值实际更改时触发

newvue({
el:“#应用程序”，
数据（）{
返回{
过滤器数据：{
排序：['PRICE\u ASC'，'PRICE\u DESC']
},
过滤器输入：{
排序：[]
}
}
},
方法：{
onChange（值）{
如果（value.length==0）{
this.filterInput.sorting=值
}否则{
this.filterInput.sorting=[value[value.length-1]]
}
}
}
})

我需要了解-getter是如何设置值的？难道它不应该读它吗？它主要是在猜测发生了什么。getter将值返回到

b-form-checkbox-group

，然后显示值。然后单击复选框时，将触发setter。这将更改

filterInput.sorting

prop。由于这个值改变，它重新计算getter

b-form-checkbox-group

然后注册更改并再次转到

set

设置值。这基本上创建了一个无限循环。问题是

b-form-checkbox-group

在使用

v-model

时没有检查该值是否实际更改。它只检查引用，因为您使用新值创建了一个新数组，所以它将获得一个新引用（即使数组包含相同的值）。与

@change

事件不同，该事件检查数组中的值是否不同，并且仅在出现这种情况时才会激发。看起来似乎不完整。非常感谢您的详细解释-现在我需要实现它。