如何将隐藏输入的值传递给Vue实例的data()属性
如何将隐藏输入的值传递给Vue实例的data()属性
提问于 2020-09-08 05:38:50
.html:
<div id="app">
<input type="hidden" name="data" value="Hello" id="data">
</div>脚本：
new Vue({
el: "#app",
data() {
return {
someData: "",
};
},
});我想将值(Hello)传递给someData，我尝试过v-模型，但它不适用于隐藏输入。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-08 05:51:19
假设您正在生成HTML服务器端，并希望从HTML获取值到Vue，您可以简单地将一个ref添加到<input>中，并在mounted挂钩中读取该值。
new Vue({
el: "#app",
data: () => ({
someData: ""
}),
mounted () {
// read the "value" from the input element
this.someData = this.$refs.data.value
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<!-- note the new "ref" attribute -->
<input type="hidden" ref="data" name="data" value="Hello" id="data">
<!-- just an example to show the data has been assigned -->
<pre>someData = {{ someData }}</pre>
</div>
如果不想向HTML添加ref或任何其他更改，当然可以直接查询DOM
mounted () {
this.someData = document.getElementById("data").value
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63787696
复制相关文章
相似问题
腾讯云开发者
