在Vue方法中修改computed计算属性不生效，能否直接变更计算属性值？

默认情况下你无法直接修改普通计算属性的值，这就是你赋值后没有效果的根本原因。

原因说明 #

你当前定义的getSelectedYearIndex是仅包含getter的计算属性：

• 这类计算属性属于只读属性，返回值完全依赖它绑定的响应式源数据（你的案例里就是this.getYears），本身不具备存储状态的能力
• Vue会直接忽略对仅含getter的计算属性的赋值操作，不会触发任何响应式更新

解决方案 #

你的场景需要的是一个可修改的响应式状态，直接把该变量定义在data中即可，不要用计算属性：

data() {
  return {
    getYears: [2016,2017,2018,2019,2020,2021],
    selectedYearIndex: 0
  }
},
// 初始化时设置默认值为数组最后一位的索引
mounted() {
  this.selectedYearIndex = this.getYears.length - 1
}

之后你在选择年份的回调中直接修改该变量即可生效：

onSelect({ selectedIndex }) {
  this.selectedYearIndex = selectedIndex
}

补充：如果你确实需要对计算属性赋值，需要为它声明setter，在setter中定义赋值后要执行的逻辑，但是这种方案适用于需要同步修改计算属性依赖的源数据的场景，和你当前选择年份的需求不匹配，因此不推荐使用。

内容的提问来源于stack exchange，提问作者Alan Miranda