Question

.html：

['2015-04-24 12:60:46',
 '2015-04-24 11:60:20',
 '2015-03-14 12:60:02',
 '2015-05-11 12:60:53',
 '2015-04-26 11:60:44',
 '2015-05-31 15:60:59',
 '2015-04-02 07:60:10',
 '2015-04-23 12:60:59',
 '2015-05-07 18:60:11',
 '2015-04-27 12:60:39',
 '2015-04-10 09:60:26',
 '2015-04-03 18:60:05',
 '2015-05-20 08:60:37',
 '2015-05-08 12:60:17',
 '2015-04-16 12:60:50',
 '2015-03-26 09:60:51',
 '2015-03-20 08:60:29',
 '2015-03-21 13:60:19',
 '2015-03-07 01:60:16',
 '2015-05-31 14:60:56',
 '2015-03-06 18:60:01',
 '2015-05-17 14:60:46',
 '2015-03-10 04:60:18',
 '2015-05-23 12:60:30',
 '2015-04-17 09:60:53',
 '2015-04-23 17:60:34',
 '2015-03-31 12:60:50',
.....]

脚本：

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

我想将值（Hello）传递给someData 我已经尝试过v模型，但是它不适用于隐藏的输入

Answer 1

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

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

1 个答案: