时间戳

首页 > 解决方案 > 如何将隐藏输入的值传递给 Vue 实例的 data() 属性

html - 如何将隐藏输入的值传递给 Vue 实例的 data() 属性

问题描述

.html：

<div id="app">    
 <input type="hidden" name="data" value="Hello" id="data">
</div>

脚本：

new Vue({
  el: "#app",
  data() {
    return {
      someData: "",
    };
  },
});

我想将 value(Hello) 传递给 someData 我尝试过 v-model 但它不适用于隐藏输入

标签： htmlvue.js

解决方案

假设您正在生成该 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>

如果不想对refHTML 添加或做任何其他更改，当然可以直接查询 DOM

mounted () {
  this.someData = document.getElementById("data").value
}

推荐阅读