I want to send sampleId from my Vue.js frontend page to the backend. However, as I press the sending button, the error pops up it says that my sample.module.js file has a problem. Can anyone help me with the problem?
The entire error looks like this below:
vue.runtime.esm.js:1887 TypeError: Cannot read properties of undefined (reading 'map')
at Store.getSampleResultRequest (samples.module.js:64:47)
at wrappedMutationHandler (vuex.esm.js:748:13)
at commitIterator (vuex.esm.js:400:7)
at Array.forEach (<anonymous>)
at eval (vuex.esm.js:399:11)
at Store._withCommit (vuex.esm.js:530:3)
at Store.commit (vuex.esm.js:398:8)
at Store.boundCommit [as commit] (vuex.esm.js:343:19)
at local.commit (vuex.esm.js:700:13)
at Store.getSampleResult (samples.module.js:21:9)
The frontend Vue.js page that I send sampleId is like this below:
<template>
<div>
<p>
<router-link to="/">Home Page</router-link>
<router-link to="/login">Logout</router-link>
</p>
<form @submit.prevent="handleSubmit">
<h2 class="getSampleResult">Get Sample Result</h2>
<div class="form-group">
<label for="sampleId">Sample Id</label>
<input type="text" v-model="sample.sampleId" name="sampleId" v-validate="'required'" class="form-control" :class="{ 'is-invalid': submitted && errors.has('sampleId') }" />
<div v-if="submitted && errors.has('sampleId')" class="invalid-feedback">{{ errors.first('sampleId') }}</div>
</div>
<div class="form-group">
<button class="btn btn-primary" @click="getSampleResult(sample.id)">Get Sample result</button>
<img v-show="sample.gettingResult" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
</div>
</form>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
data () {
return {
sample:{
sampleId: 0
},
submitted: false
}
},
created () {
this.getAllSamples();
},
computed: {
...mapState({account: state => state.account, users: state => state.users.all, samples: state => state.samples.all})
},
methods: {
...mapActions('samples', {
getSampleResult: 'getSampleResult',
getAllSamples: 'getAllSamples'
}),
handleSubmit (e) {
this.submitted = true;
this.getSampleResult(this.sample.sampleId);
}
}
};
</script>
<style scoped>
.newSample{
color:blue
}
form{
background-color:rgb(218,226,249);
color:black;
width: 400px;
margin-top: 300px;
margin-left: 200px;
}
input[type="text"], input[type="password"] {
margin: 8px 0;
width: 200px;
}
</style>
The sample.module.js file looks like this:
import { sampleService } from '../_services';
const state = {
all: {}
};
const actions = {
getSampleResult({commit}, id){
commit('getSampleResultRequest', id);
sampleService.getSampleResult(id).then(
sample => commit('getSampleResultSuccess', id),
error => commit('getSampleResultFailure', {id, error: error.toString()})
);
},
getAllSamples({commit}){
commit('getAllSampleRequest');
sampleService.getAllSamples().then(
sample => commit('getAllSampleSuccess', sample),
error => commit('getAllSampleFailure', error)
);
},
addNewSample({dispatch, commit}, sample){
commit('addNewSampleRequest', sample);
sampleService.addNewSample(sample).then(
sample => {
commit('addNewSampleSuccess', sample)
},
error => {
commit('addNewSampleFailure', error);
dispatch('alert/error', error, { root: true });
}
)
}
}
const mutations = {
getAllSampleRequest(state) {
state.all = { loadingSamples: true };
},
getAllSampleSuccess(state, samples) {
state.all = { samples: samples };
console.log(state);
},
getAllSampleFailure(state, error) {
state.all = { error };
},
getSampleResultRequest(state, id) {
state.all.samples = state.all.samples.map(sample =>
sample.sampleId === id
? { ...sample, getSampleResult: true }
: sample
)
console.log(state);
},
getSampleResultSuccess(state, id) {
state.all.samples = state.all.samples.filter(sample => sample.sampleId === id)
},
getSampleResultFailure(state, {id, error}) {
state.all.samples = state.samples.map(sample => {
if (sample.sampleId !== id) {
// make copy of user without 'deleting:true' property
const { deleting, ...sampleCopy } = sample;
// return copy of user with 'deleteError:[error]' property
return { ...sampleCopy, deleteError: error };
}
return sample;
})
},
// getSampleIdRequest(state, sample){
// state.status = {getSampleId: true};
// state.sample = sample;
// },
// getSampleIdSuccess(state, sample){
// state.status = {getSampleId: true};
// state.sample = sample;
// },
// getSampleIdFailure(state, {id, error}){
// state.status = {};
// state.sample = null;
// },
addNewSampleRequest(state, sample) {
state.sample = sample;
},
addNewSampleSuccess(state, sample) {
state.sample = sample;
},
addNewSampleFailure(state, error) {
state.sample = null;
}
};
export const samples = {
namespaced: true,
state,
actions,
mutations
};
