While in debug mode, I encountered a warning in the console. The warning message is:
[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside mutation handlers."
(found in <Root>)
This warning only appears when a button click event triggers to display detailed information. Below is the code snippet causing this issue:
<template>
<section>
<!--Header-->
<h1 class="section-title">Security Groups</h1>
<!--Table-->
<b-table small hover show-empty v-if="securityGroupsLoading === false" head-variant="dark" :items="securityGroups"
:fields="fields">
<template v-slot:cell(details)="row">
<b-button size="sm" @click="row.toggleDetails" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Addresses
</b-button>
</template>
<template v-slot:row-details="row">
<b-card>
<b-row class="mb-2">
<div v-if="row.item.addresses.length !== 0"> {{ row.item.addresses }} </div>
</b-row>
</b-card>
</template>
</b-table>
<loader v-if="securityGroupsLoading === true" />
</section>
</template>
<script>
import { mapState } from 'vuex'
import Loader from '@/components/Loader.vue'
export default {
name: 'SecurityGroups',
components: {
Loader,
},
props: {
scopeId: {
type: String,
required: true,
},
},
data: () => ({
fields: [
{ key: 'name', sortable: true },
{ key: 'type', sortable: true },
{ key: 'description', sortable: true },
{ key: 'tag_association_type', sortable: true },
{ key: 'tags', sortable: true },
{ key: 'usable', sortable: true },
{ key: 'details', sortable: true },
],
}),
computed: {
...mapState({
securityGroups: state => state.securityGroups.groups,
securityGroupsLoading: state => state.securityGroups.status.items === 'fetching',
}),
},
}
</script>
<style lang="scss" scoped>
.overflowed {
max-height: 150px;
overflow: auto;
}
</style>
Click here to see the Hide / Show button
Although it's just a warning that can be removed by setting the "strict" option to false, I am looking to understand how to resolve this issue. Your help is greatly appreciated.
Thank you in advance for your assistance. Sereg.