This content originally appeared on CodeSource.io and was authored by Deven
If you are Getting Vuex computed property was assigned to but it has no setter error. This article will help you fix the issue.
The error happens because of the v-model. It’s trying to change the value of isLoading but mapState will only create getters.
Consider the example below:
For your component file:
<template>
<div id="app">
<router-view></router-view>
<loading v-model="isLoading"></loading>
</div>
</template>
<script>
import { Loading } from 'vux'
import { mapState } from 'vuex'
export default {
name: 'app',
components: {
Loading
},
computed: {
...mapState({
isLoading: state => state.isLoading
})
}
}
}
</script>Your store file should be like below:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
isLoading: false
}
const mutations = {
updateLoadingStatus (state, payload) {
state.isLoading = payload.isLoading
}
}
export default new Vuex.Store({
state,
mutations
}) You can make things work by binding the value to the isLoading and then handle the update by committing the mutations on the @input
Consider the example below:
<template>
<div id="app">
<router-view></router-view>
<loading :value.sync="isLoading"></loading>
</div>
</template>
<script>
import { Loading } from 'vux'
import { mapState } from 'vuex'
export default {
name: 'app',
components: {
Loading
},
computed: {
...mapState({
isLoading: state => state.isLoading
})
}
}
</script>The post Fix – Vuex computed property was assigned to but it has no setter appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Deven
Deven | Sciencx (2021-02-23T17:41:59+00:00) Fix – Vuex computed property was assigned to but it has no setter. Retrieved from https://www.scien.cx/2021/02/23/fix-vuex-computed-property-was-assigned-to-but-it-has-no-setter/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.