Obtener el valor de un con Vue.js

publicado por: Anonymous

Mi problema es que no consigo obtener el valor que tiene el <select>, aunque le pongo el atributo v-modela la etiqueta <select> y que en internet encuentro que es la manera correcta, no me funciona, cree este ejemplo para que me entiendan mejor y me puedan ayudar mas cómodamente.

Estoy utilizando Materialize y haciendo pruebas le quite el css a la pagina para ver que sucedia y curiosamente al seleccionar una <option> del <select> si tomaba el value, pero tengo que utilizar Materialize

Mi objetivo es obtener el value de la <option> que tiene seleccionada el <select>, espero puedan ayudarme.

También les dejo acá el fragmento de código, lo que tuviera que suceder es que al seleccionar algo, apareciera el div que tiene el v-if, si van al ejemplo de codepen y quitan la libreria materialize css notaran que si funciona pero al agregar el css de materialize deja de hacerlo.

_x000D_

_x000D_

$(document).ready(function() {_x000D_
  $('select').material_select();_x000D_
});_x000D_
_x000D_
var app = new Vue({_x000D_
  el: "#root",_x000D_
  data: {_x000D_
    elementos: [{_x000D_
        value: '0',_x000D_
        text: 'Seleccionar...'_x000D_
      },_x000D_
      {_x000D_
        value: '1',_x000D_
        text: 'Opcion 1'_x000D_
      },_x000D_
      {_x000D_
        value: '2',_x000D_
        text: 'Opcion 2'_x000D_
      },_x000D_
    ],_x000D_
    seleccionado: ""_x000D_
  }_x000D_
});

_x000D_

body {_x000D_
  background-color: #90a4ae;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
  <meta charset="UTF-8">_x000D_
  <title>select vue ejemplo pregunta</title>_x000D_
_x000D_
_x000D_
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>_x000D_
_x000D_
  <link rel="stylesheet" href="css/style.css">_x000D_
_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
  <div id="root" class="container">_x000D_
    <br><br>_x000D_
    <div class="card-panel blue-grey lighten-5">_x000D_
      <form>_x000D_
        <div class="container-fluid">_x000D_
          <div class="row">_x000D_
            <div class="input-field col s12">_x000D_
              <select v-model="seleccionado">_x000D_
                <option v-for="elemento in elementos" v-bind:value="elemento.value">{{ elemento.text }}</option>_x000D_
              </select>_x000D_
              <label>Materialize Select</label>_x000D_
            </div>_x000D_
            <div class="input-field col s12" v-if="seleccionado != ''">_x000D_
              <label>seleccionado: {{seleccionado}}</label>_x000D_
            </div>_x000D_
          </div>_x000D_
        </div>_x000D_
      </form>_x000D_
    </div>_x000D_
  </div>_x000D_
  <script src='https://code.jquery.com/jquery-3.3.1.js'></script>_x000D_
  <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>_x000D_
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>_x000D_
_x000D_
_x000D_
_x000D_
  <script src="js/index.js"></script>_x000D_
_x000D_
_x000D_
_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

Puedes utilizar Refs, así:

<div class="input-field">
    <select ref="seleccionado">
        <option v-for="elemento in elementos">{{elemento.text}}</option>
    </select>
<label>Elementos</label>

Y en tu data:{}

elementos: [{
    otrasPropiedades: 'aaa',
    text: 'Seleccionar...'
    },
    {
    otrasPropiedades: 'bbb',
    text: 'Opcion 1'
    },
    {
    otrasPropiedades: 'ccc',
    text: 'Opcion 2'
    },
],

Cuando quieras almacenar el value entonces puedes usar:

this.seleccionado = this.$refs.seleccionado.value;

dentro de los methods.

PD: Puedes acceder a más elementos del select además del .value, solo inspecciona qué elemento quieres.

Edit: Esto con Vue 2, no estoy seguro sin con Vue 1 funciona.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *