Get the value of a select with Vue.js

Question

Get the value of a select with Vue.js

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

My problem is that I can not get the value that the <select> has, although I put the attribute v-model to the label <select> and that on the internet I find that it is the correct way, it does not work for me, create this example so that they understand me better and can help me more comfortably.

I'm using Materialize and doing tests I removed css to the page to see what happened and curiously to select a <option> of <select> if I took the value , but I have to use Materialize

My goal is to get the value of the <option> that has selected the <select> , I hope you can help me.

I also leave here the fragment of code, what had to happen is that when selecting something, the div that has the v-if would appear, if they go to example of codepen and remove the library materialize css will notice that if it works but when adding the css of materialize it stops doing it.

$(document).ready(function() {
  $('select').material_select();
});

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

body {
  background-color: #90a4ae;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>select vue ejemplo pregunta</title>


  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>

  <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <div id="root" class="container">
    <br><br>
    <div class="card-panel blue-grey lighten-5">
      <form>
        <div class="container-fluid">
          <div class="row">
            <div class="input-field col s12">
              <select v-model="seleccionado">
                <option v-for="elemento in elementos" v-bind:value="elemento.value">{{ elemento.text }}</option>
              </select>
              <label>Materialize Select</label>
            </div>
            <div class="input-field col s12" v-if="seleccionado != ''">
              <label>seleccionado: {{seleccionado}}</label>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <script src='https://code.jquery.com/jquery-3.3.1.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>



  <script src="js/index.js"></script>




</body>

</html>

materialize vue.js

asked by Villatoro 15.03.2018 в 22:46

source

2 answers

Error 'NoneType' object is not callable when trying to select item by id Doubt about dictionaries in Python

score 1 · Answer 1

You can use Refs, like this:

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

And in your data: {}

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

When you want to store the value then you can use:

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

within the methods.

PS: You can access more elements of the select besides the .value, just inspect what item you want.

Edit: This with Vue 2, I'm not sure without Vue 1 works.

score 0 · Answer 2

I could already solve it, apparently to use Vue.js with Materialize in some things cause confict ... but with this code that you add in the event mounted solve it and I could already get the value of the option selected.

var vue = this;//vue

$('select').material_select();

$('#vueSelect').on('change', function () {
    vue.$emit("change", this.value)
});

vue.$on("change", function(data){
    this.seleccionar.value = data
});

Here is the complete example:

var app = new Vue({
	el: "#root",
	data: {
    seleccionar: {value: ""},
    elementos: [
        { value: '1', text: 'Opcion 1' },
        { value: '2', text: 'Opcion 2' },
      ],
    seleccionado: ""
	},

    mounted:function() {
        var vue = this;//vue

        $('select').material_select();

        $('#vueSelect').on('change', function () {
            vue.$emit("change", this.value)
        });

        vue.$on("change", function(data){
            this.seleccionar.value = data
        });
    }
});

body{
  background-color: #90a4ae;
}

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