How to get an input field value in vue

Question

I'm new to vue and I would like some help getting a value from an input field:

So in my form I have:

<input type="hidden" id="groupId" value="1">

And with jQuery I would do:

var group_id = $('#groupId').val();

In vue I don't know how to bind the hidden field:

<div id="app">
   <input type="text" v-model="groupId"> //Where do I put the value?
</div>

 new Vue({
    el: '#app',
    data: {
        groupId: //What do I put here to get the field's value?
    }

Can someone please help?

Answer 1

Update to the update : See this answer . Previously updated answer was wrong.

Original answer:

In Vue, you don't get things from the view and put things into the view. Vue does that. You do all manipulations in the viewmodel, and make bindings in the view so that Vue knows how to synchronize it. So you'd bind the input to your model data item:

<input type="hidden" id="groupId" v-model="groupId">

and set its value in your viewmodel:

data: {
    groupId: 1
}

Answer 2

I had the same question. I'm working with Vue + Laravel.

For me, the solution was simple after searching and not finding a concrete solution in the Vue documentation.

Simply:

document.getElementById('MyId').value;

Details in → https://www.w3schools.com/jsref/prop_text_value.asp

It is not the most efficient solution, but it works for now!

Greetings.

Answer 3

Working sample of getting value from input field in this case it is hidden type:

<input type="hidden" name="test">

<script>
new Vue ({
    created () {
        const field = document.querySelector("input[name=test]").value
        console.log(field)
    }
})
</script>

Answer 4

this code helped me i hope that this work with you

1. define the input

        <div class="root">
            <input type="hidden" ref="groupId" value="1">
            <button type="button" v-on:click="get_id()">test</button>
        </div>

2. define the method

new Vue({
  el: ".root",
  data: {
    id: null,
  }
  methods: {
    get_id() {
      this.id = this.$refs.groupId.value;
    }
  }
});

Answer 5

// if you want it displayed on your page, use {{ groupId }}

/* you can get the value by using @change.enter=".." @keypress.enter="getInputValue",
   or @input="getInputValue" or @click="getInputValue" using button, 
   or if it is with a form element, @submit.prevent="getInputValue" */

/* @keypress.enter tracks input but only calls the function when the Enter key 
   is pressed, @input track changes as it's being entered */

// it is important to use event.preventDefault() when using @change or @keypress

<div id="app">
  <input type="text" v-model="groupId">
  <p> {{ groupId }} </p>

  <button @click="getInputValue">Get Input</button>
</div>

new Vue({
  el: '#app',
  data: {
    groupId: //What do I put here to get the field's value?

    // for what to put there, you can use an empty string or null
    groupId: "",
  },

  // to get the value from input field
  methods: {
    getInputValue: function() {
      if(this.groupId !== "") {
        console.log(this.groupId);
      }
    },
  }
})

Answer 6

look at this I did it in laravel, vuejs, vuetable2 and children's row, and don't use the v-model:

this.$refs['est_'+id_det].localValue

en VUE:

<div class="col-md-3">
<b-form-select class="form-control selectpicker" :ref="'est_'+props.row.id_detalle_oc"
 :value="props.row.id_est_ven" v-on:change="save_estado(props.row.id_detalle_oc)">
    <option value="0">Sin estado</option>
    <option value="1">Pendiente</option>
    <option value="2">Impresa</option>
    <option value="3">Lista</option>
</b-form-select>

in methods

methods: {
        save_estado:function (id_det){
            var url= 'ordenes-compra/guardar_est_ven'
            var id_estado = this.$refs['est_'+id_det].localValue
             axios.post(url,{
                id_det: id_det,
                id_est_ven: id_estado,
                est_ven: est_ve
            }).then(function (response) {
                var respuesta= response.data;
                if(respuesta == "OK"){
                swal({
                        type: 'success',
                        title: '¡Éxito!',
                        text: 'Estado modificado',
                        confirmButtonText: 'Entendido',
                    })
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },

I hope it helps, I've been hanging around for a while. Regards

Answer 7

Hi you can also try the following:

const input = this.$el.firstElementChild;

in case you are using TypeScript, declare input as:

: HTMLInputElement

Then, you can simply get the value if you do:

input.value

Hope it helps!

Answer 8

好的，这可以完成这项工作： document.querySelector('#groupId').getAttribute('value');