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>