vue-cli3 报Computed property “xxx” was assigned to but it has no setter.

旧城等待， 2023-06-05 08:15 75阅读 0赞

这种问题一般是area这个计算属性没有设置set方法导致该报错，

因为在methods方法里面有对area赋值的操作。只要添加一个 set方法就可以解决此报错。

v-model会视图直接修改vuex中的state中的searchWebName，在严格模式下，由于这个修改不是在mutation函数中执行的，所以这里就会抛出一个错误.

方法一：

监听值变化，调用mutations中方法修改数据

<template>
    <input :value="message" @input="updateMessage">
    </template>
    <script>
    import{mapGetters} from "vuex";
    export default{
        computed: {
          ...mapState({
            message: state => state.obj.message
          })
        },
        methods: {
            updateMessage (e) {
            this.$store.commit('updateMessage', e.target.value)
          }
        }
    }
    </script>
     
    // ...
    mutations: {
      updateMessage (state, message) {
        state.obj.message = message
      }
    }

方法二

计算属性：使用带有Setter的双向绑定计算属性

<template>
        <el-form class="searchDiv">
            <el-form-item label="网站名称：">
                  <input class="inputC" v-model="searchWebName" placeholder="网站名称" />
             </el-form-item>
        </el-form>
    </template>
     
    <script>
    import { mapGetters, mapActions } from "vuex";
    export default {
        computed: {
            ...mapGetters(["listProject"]),
            searchWebName: {
              get() {
                    return this.$store.state.searchWebName;
              },
              set(value) {
                    this.$store.commit("SET_WENNAME", value);
              }
            },
        }
     
    }
     
    </script>
    
    export default new Vuex.Store({
        state: {
            listProject:[],
            searchWebName: '',
        },
        mutations: {
            SET_PROJECT_LIST: (state, {
                projectlist
            }) => {
                state.listProject= projectlist
            },
            SET_WENNAME(state, val) {
                state.searchWebName = val
            },
        },
        getters: {
            listProject: state => {
                return state.listProject;
            },
        }
     
    })

方法三

使用mapMutations引入方法

computed: {
        showBattleConfirm: {
          get() {
            return this.$store.state.showBattleConfirm;
          },
          set() {}
        }
      },
     methods: {
        ...mapMutations(["setBattleConfirm"]),
     }
    
    //vuex
      mutations: {
        setBattleConfirm:(state,data) =>{
          state.showBattleConfirm = data
        },
      },