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

Question

.html:

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

脚本：

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

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

Answer 1

假设您正在生成 HTML 服务器端并希望将 HTML 中的值获取到 Vue 中，您可以简单地ref在<input>和 挂钩中添加 a 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>

如果您不想添加ref或对 HTML 进行任何其他更改，您当然可以直接查询 DOM

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