0

Estoy tratando de aplicar el plugin Select2 sobre un select que lo cargo utilizando VUE.JS (hago un v-for sobre el option del select)

Si no aplico el plugin, al hacer v-model="modelo", puedo utilizar la variable ({{modelo}}) de forma correcta.

Pero si aplico el plugin, VUE deja de leer el v-model y no puedo utilizar el databinding.

Adjunto el JSFIDDLE:

https://jsfiddle.net/rLmztr2d/11/

Código:

var vm = new Vue({
  el: "#divMain",
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
});

$('#miSelect').select2({
    placeholder: 'Select an option'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<div id="divMain">

  <select id="miSelect" v-model="selected">
    <option v-for="opt in options" v-bind:value="opt.value">
      {{ opt.text }}
    </option>
  </select>
  <span>Selected: {{ selected }}</span>

</div>

1 respuesta 1

1

Quizá es un poco "tricky" pero aquí te dejo tu fiddle modificado y funcionando:

var vm = new Vue({
  data: {
    selected: 'A',
    options: [
      { text: 'One', id: 'A' },
      { text: 'Two', id: 'B' },
      { text: 'Three', id: 'C' }
    ]
  },
  mounted() {
  	let self = this; // ámbito de vue
    
    // inicializas select2
    $('#miSelect')
      .select2({ 
      	placeholder: 'Select an option',
      	data: self.options, // cargas los datos en vez de usar el loop
       })
       // nos hookeamos en el evento tal y como puedes leer en su documentación
       .on('select2:select', function () {       
       	var value = $("#miSelect").select2('data');
        // nos devuelve un array
        
        // ahora simplemente asignamos el valor a tu variable selected de VUE
        self.selected = value[0].id
      })
  }
}).$mount('#app');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>

<div id="app">

  <select id="miSelect"></select>
  <span>Selected: {{ selected }}</span>

</div>

0

Tu Respuesta

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

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