Dentro del template del componente Event.vue tengo un select que lee de la tabla wallet, es un select normal para elegir solo un tipo de wallet (no es multiselección), para ese select ocupo el componente vue-multiselect para hacer un select simple, el código es el siguiente
<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>
Como Vue trae el objeto completo, yo solamente necesito estrar el id de la wallet seleccionada, para eso ocupo la función map de js, el poblema es que me arroja el siguiente error a la hora hacer funcionar la vista
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)
¿Como puedo solucionar esto? Ocupo Laravel 5.6 y Vuejs 2