我是 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?
}
我怎样才能做到这一点？
【问题讨论】：
标签： javascript vue.js
更新到更新：See this answer。之前更新的答案是错误的。
原答案：
在 Vue 中，您不会从视图中获取内容并将内容放入视图中。 Vue 就是这样做的。您在视图模型中进行所有操作，并在视图中进行绑定，以便 Vue 知道如何同步它。因此，您可以将输入绑定到模型数据项：
<input type="hidden" id="groupId" v-model="groupId">
并在您的视图模型中设置其值：
data: {
groupId: 1
}
【讨论】：
v-model 的使用很好。对不起，如果这混淆了什么。重点是需要在viewmodel中设置值。我不使用 Laravel，所以我帮不了你。
groupId 的值。在使用 ajax 或 axios 从 laravel 控制器获取值后，您可以稍后在任何 vue 方法中更新它，如 this.groupId = 2。
我也有同样的问题。我正在使用 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>
【讨论】：
这段代码帮助了我 我希望这对你有用
<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;
}
}
});
【讨论】：
// 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);
}
},
}
})
【讨论】：
看看这个我是在laravel、vuejs、vuetable2和children的行里做的，不要用v-model：
this.$refs['est_'+id_det].localValue
zh 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，请将输入声明为：
: HTMLInputElement
然后，如果你这样做，你可以简单地获得价值：
input.value
希望对你有帮助！
【讨论】：
好的，这就完成了：document.querySelector('#groupId').getAttribute('value');
【讨论】：