Inside the template of the Event.vue component I have a select that reads from the wallet table, it is a normal select to choose only one type of wallet (it is not multiselect), for that select I occupy the vue-multiselect component to make a simple select, the code is as follows
<template>
<div class="form-group row">
<label for="" class="col-2 col-form-label">Bitellera</label>
<div class="col-3">
<multiselect name="wallet" v-model="walletvalue"
track-by="id"
label="name"
placeholder="Selecciona"
:options="wallets"
:searchable="false"
:allow-empty="false">
</multiselect>
</div>
</template>
<script>
export default {
components: {
Multiselect,
Datepicker,
},
props: ['auth'],
data () {
return {
wallets: [],
walletvalue: [],
}
},
created() {
this.getWallet();
},
methods: {
getWallet(){
let urlWallet = '/dashboard/wallets';
axios.get(urlWallet)
.then((response) => {
this.wallets = response.data;
})
.catch((err) => {
})
},
createdEvent(){
let urlEvent = '/dashboard/addevent';
let idwallet = this.walletvalue.map(e=> e.id);
const eventData = {
'wallet' : idwallet,
}
axios.post(urlEvent, eventData)
.then((response) => {
console.log(ok);
})
.catch((err) => {
})
}
}
</script>
As Vue brings the complete object, I only need to select the id of the selected wallet, for that I use the map function of js, the problem is that it throws me the following error when making the view work
Uncaught TypeError: this.walletvalue.map is not a function
at VueComponent.createdEvent (app.js:79132)
at submit (app.js:79192)
at invoker (app.js:22317)
at HTMLFormElement.fn._withTask.fn._withTask (app.js:22116)
How can I solve this? I occupy Laravel 5.6 and Vuejs 2