Vue/Vuex/Axios, Computed property was assigned to but it has no setter

Question

i am stuck, i am new to vue and vuex and when i run the below code it got me this error. I have searched some of the other questions here but i can't find a solution

[Vue warn]: Computed property "vat" was assigned to but it has no setter.

found in

---> <BusinessList>
       <App> at src/App.vue
         <Root>

Can someone help me?

-> Below are the files with the code

BusinessList.vue

<script>
// import BusinessDataService from "../services/BusinessDataService";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "BusinessList",
  methods: {
    ...mapActions(["fetchBusinesses", "searchBusiness"])
  },
  computed: mapGetters(["allBusinesses", "vat"]),
  created(){
    this.fetchBusinesses();
  },
  mounted() {
    this.searchBusiness(this.vat);
  }
};
</script>

<template>
<!-- SEARCH FORM -->
                <div class="input-group input-group-md">
                    <input
                    class="form-control form-control-navbar"
                    type="search"
                    placeholder="Search by Vat"
                    aria-label="Search"
                    v-model="vat"
                    />
                    <div class="input-group-append">
                    <button class="btn btn-outline-danger" 
                    type="submit"
                    @click="searchBusiness"
                    >
                        <i class="fas fa-search"></i>
                    </button>
                    </div>
                </div>
</template>

This is because vat is a computed property coming from your store, but you've assigned it as a v-model property, which will attempt to write to the value. Instead, hold a local value as the v-model and update the store when that value changes so you have proper bidirectional communication. — Ohgodwhy

hamid niakan hamid niakan · Accepted Answer · 2020-12-06T07:20:05

In vue computed are set to be a getter by default, it means that if you want to set a value to a computed you should define a setter in that computed. here is the vue documentation to read more about this topic:

computed setter vue documentation

now you have set the computed 'vat' from vuex store and used it as a v-model in your template. it means that whenever input data changes, vue tries to assign a value to a computed which has no setter and hence you are getting this error. you should set v-model to a variable in your data and refactor your code to reflect this change.

Vue/Vuex/Axios, Computed property was assigned to but it has no setter

1 Answers