laravel 如何在vue中获取输入字段值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39676156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get an input field value in vue
提问by Sigal Zahavi
I'm new to vue and I would like some help getting a value from an input field:
我是 vue 的新手，我想从输入字段中获取值需要一些帮助：
So in my form I have:
所以在我的表格中，我有：
<input type="hidden" id="groupId" value="1">
And with jQuery I would do:
使用 jQuery 我会这样做：
var group_id = $('#groupId').val();
In vue I don't know how to bind the hidden field:
在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?
}
Can someone please help?
有人可以帮忙吗？
回答by Roy J
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:
在 Vue 中，您不会从视图中获取事物并将事物放入视图中。Vue 就是这样做的。您在视图模型中进行所有操作，并在视图中进行绑定，以便 Vue 知道如何同步它。因此，您将输入绑定到模型数据项：
<input type="hidden" id="groupId" v-model="groupId">
and set its value in your viewmodel:
并在您的视图模型中设置其值：
data: {
groupId: 1
}
回答by Jhon Didier Sotto
I had the same question. I'm working with Vue + Laravel.
我有同样的问题。我正在使用 Vue + Laravel。
For me, the solution was simple after searching and not finding a concrete solution in the Vue documentation.
对我来说，在搜索之后解决方案很简单，并且在 Vue 文档中没有找到具体的解决方案。
Simply:
简单地：
document.getElementById('MyId').value;
document.getElementById('MyId').value;
Details in → https://www.w3schools.com/jsref/prop_text_value.asp
详情在 → https://www.w3schools.com/jsref/prop_text_value.asp
It is not the most efficient solution, but it works for now!
这不是最有效的解决方案，但它现在有效！
Greetings.
你好。
回答by Nezir
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>
回答by ThcMago
look at this I did it in laravel, vuejs, vuetable2 and children's row, and don't use the v-model:
看看这个我是在laravel、vuejs、vuetable2和children's row中做的，不使用v-model：
this.$refs['est_'+id_det].localValue
en VUE:
恩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
我希望它有帮助，我已经闲逛了一段时间。问候
回答by Koko Monsef
this code helped me i hope that this work with you
这段代码帮助了我我希望这对你有用
- define the input
- 定义输入
<div class="root">
<input type="hidden" ref="groupId" value="1">
<button type="button" v-on:click="get_id()">test</button>
</div>
- define the method
- 定义方法
new Vue({
el: ".root",
data: {
id: null,
}
methods: {
get_id() {
this.id = this.$refs.groupId.value;
}
}
});
回答by Sigal Zahavi
Ok, this does the job: document.querySelector('#groupId').getAttribute('value');
好的，这可以完成这项工作： document.querySelector('#groupId').getAttribute('value');
