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>
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.