更新到更新：See this answer。以前更新的答案是错误的。

原答复：
在Vue中，你不会从视图中获取东西并将其放入视图中。Vue会这样做。你在视图模型中完成所有操作，并在视图中进行绑定，以便Vue知道如何同步它。所以你会将输入绑定到模型数据项：

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

并在视图模型中设置其值：

data: {
    groupId: 1
}

我也有同样的问题。我正在使用Vue + Laravel。
对我来说，在Vue文档中搜索并没有找到具体的解决方案后，解决方案很简单。
简而言之：
document.getElementById('MyId').value;
详情请参见→ https://www.w3schools.com/jsref/prop_text_value.asp
这不是最有效的解决方案，但它现在有效！
你好。

从输入字段中获取值的工作示例，在这种情况下，它是隐藏类型：

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

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

这段代码对我有帮助，希望能和你一起工作
1.定义输入

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

1.定义方法

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

// 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);
      }
    },
  }
})

要在Vue中获取输入值，我们可以使用v-model指令在值和变量之间建立双向绑定

<template>
  <div id="app">
    <input
      type="text"
      v-model="text"
      placeholder="Text"
      @input="handleInput"
    />
    <br />
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
  methods: {
    handleInput(event) {
      console.log(event.target.value);
    },
  },
};
</script>

看看这个，我在laravel，vuejs，vuetable2和children's row中做了，不要使用v模型：

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>

在方法中

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);
            });
        },

我希望这能帮上忙，我已经在这里呆了一段时间了。

您也可以尝试以下操作：

const input = this.$el.firstElementChild;

如果你使用的是TypeScript，请将input声明为：

: HTMLInputElement

然后，你可以简单地得到值，如果你这样做：

input.value

希望有帮助！

好的，这是工作：document.querySelector（'# groupId'）.getAttribute（'value '）;