Search code examples
javascriptvue.jsvuetify.jsvuex

TypeError: type is undefined

I want to set my array from state to v-select, this is my storage:

export default ({
state: {
  trainerList: []
},
getters: {
  TRAINER_LIST(state){
    console.log(state.trainerList)
    return state.trainerList
  }
},
mutations: {
  SET_TRAINER_LIST_TO_STATE(state, trainerList){
    return state.trainerList = trainerList
  }
},
actions: {
    async GET_BRANCH_FROM_API({commit}){
        return axios.get(`${BASE_URL}/api/trainer-list/`,
        {
        headers:{
            Authorization: 'Token ' + sessionStorage.getItem('usertoken')
        }
        })
        .then((response)=>{
            commit('SET_TRAINER_LIST_TO_STATE', response.data)
        })
    },
},
modules: {
}

})

this is my getter and action in component:

computed:{
    ...mapGetters([
        'TRAINER_LIST'
    ])
},
created(){
    this.GET_BRANCH_FROM_API()
}

my select from template:

                             <v-select
                                label="Выберите тренера"
                                :items="TRAINER_LIST"
                                variant="solo"
                                class="mt-3"
                                :item-text="TRAINER_LIST.coach_name"
                                item-value="id"
                                clearable
                                v-model="form.trainerId"
                            ></v-select>

when I click on select, empty elements appear there, when an element is selected, an object, an object is highlighted

enter image description here

enter image description here

and displaying this error:

enter image description here

my state is returning data correctly, as I understand it, the select cannot determine the type of my state?

enter image description here

Can anybody help me, please? I have no idea what to do, because I need array here

Solution

  • Referring to the docs, Change your v-select to:

     <v-select
 label="Выберите тренера"
 :items="TRAINER_LIST"
 variant="solo"
 class="mt-3"
 item-text="coach_name"
 item-value="id"
 clearable
 v-model="form.trainerId"
 ></v-select>