案发现场
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>
