Question

我是vue的新手，我想帮助从输入字段中获取值：

所以在我的表格中我有：

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

使用jQuery我会这样做：

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

在vue中，我不知道如何绑定隐藏字段：

<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?
    }

有人可以帮忙吗？

Answer 1

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

原始答案：

在Vue中，您无法从视图中获取内容并将内容放入视图中。 Vue这样做。您在viewmodel中执行所有操作，并在视图中进行绑定，以便Vue知道如何同步它。因此，您将输入绑定到模型数据项：

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

并在viewmodel中设置其值：

data: {
    groupId: 1
}

Answer 2

我有同样的问题。我正在使用Vue + Laravel。

对我来说，解决方案很简单，只需搜索即可，而未在Vue文档中找到具体的解决方案。

简单地：

document.getElementById('MyId').value;

→here

中的详细信息

这不是最有效的解决方案，但目前可以使用！

问候。

Answer 3

此代码帮助了我我希望与您合作

定义输入

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

定义方法

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

Answer 4

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

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

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

Answer 5

看看这个，我是在laravel，vuejs，vuetable2和儿童行中做的，并且不使用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);
            });
        },

我希望对您有所帮助，我已经闲逛了一段时间。问候

Answer 6

嗨，您还可以尝试以下操作：

const input = this.$el.firstElementChild;

如果您使用的是TypeScript，请将输入声明为：

: HTMLInputElement

然后，您只需执行以下操作即可获取值：

input.value

希望有帮助！

Answer 7

好的，这可以完成这项工作：document.querySelector（＆＃39; #groupId＆＃39;）。getAttribute（＆＃39; value＆＃39;）;

如何在vue中获取输入字段值

7 个答案: