Vue computed property values was

案发现场

vue 文件中的核心代码写法

<template>
  <div>
    <v-select
      :items="filters"
      label="查询条件"
      solo
      dense
      class="select-size"
      v-model="filterKey"
      clearable
    ></v-select>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      filters: state => state.table.filters,
      filterKey: state => state.table.filterKey
    })
  }
}
</script>

使用了 vuex 中的值来显示内容, 然后报错 [Vue warn]: Computed property "filterKey" was assigned to but it has no setter.

解决方案

由于数据从 store 中来, 不能直接对数据修改, 因此, 使用 data 的值绑定 v-model 然后, data 数据在初始化时使用 store 的值就可以了.

调整后的vue文件

<template>
  <div>
    <v-select
      :items="filters"
      label="查询条件"
      solo
      dense
      class="select-size"
      v-model="key"
      clearable
    ></v-select>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      key: null
    }
  },
  created () {
    this.key = this.filterKey
  },
  computed: {
    ...mapState({
      filterKey: state => state.table.filterKey
    })
  }
}
</script>