4

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

4
  • En su componente sigue utilizando multiselect cuando solo necesita una opción seleccionada, ¿Por qué no solo utilizar el select básico?
    – Dev. Joel
    el 26 abr. 2018 a las 3:02
  • Porque el select básico se descompagina, se cambia solo de opción, se comporta de forma extraña
    – Felipe
    el 26 abr. 2018 a las 3:30
  • Bueno añadí una solución a su problema, aunque me queda duda cuando dice "descompagina" , cambia solo de opción , ¿Está utilizando mdb_select() ?
    – Dev. Joel
    el 26 abr. 2018 a las 5:23
  • 1
    Si, pero ya solucione el problema, estoy trabajando en el controlador ahora. Muchas gracias por tu ayuda y tiempo.
    – Felipe
    el 26 abr. 2018 a las 5:38

1 respuesta 1

2

Al no tratarse de una selección múltiple, lo que obtiene en v-model es un objeto básico , por lo cuál no es necesario un map y sería incorrecto ya que este método pertenece a los arrays , simplemente debería acceder a la propiedad que desea, para este caso solo el id

let idwallet  = this.walletvalue.id;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.