vue.js - Vue / Buefy Datetimpciker:如何将 vue 组件的结果提交到表单?
问题描述
对于我的新网站项目,我想在 html 表单中使用日期时间选择器。当我使用 Bulma 作为 CSS 框架时,我想使用 buefy datetimepicker https://buefy.org/documentation/datetimepicker,它正在使用 vue。
目前,datetimepicker 很好地显示在我的网站上,但是,通过 POST 请求提交 html 表单时,我无法接收结果。
我需要更改什么以使所选日期时间可用作 php $_POST 变量中的变量?
codepen上的代码
<form action="submit.php" method="POST">
<div id="app" class="container">
<b-field label="Select datetime">
<b-datetimepicker
rounded
placeholder="Click to select..."
icon="calendar-today"
:locale="locale"
:datepicker="{ showWeekNumber }"
:timepicker="{ enableSeconds, hourFormat }"
horizontal-time-picker>
</b-datetimepicker>
</b-field>
</section>
</div>
<div class="field">
<div class="control">
<button class="button is-primary">Submit</button>
</div>
</div>
</form>
<script>
const example = {
data() {
return {
showWeekNumber: true,
enableSeconds: false,
hourFormat: undefined, // Browser locale
locale: undefined // Browser locale
}
}
}
const app = new Vue(example)
app.$mount('#app')
</script>
解决方案
您应该通常使用 v-model 将 datetimepicker 绑定到一个变量,然后将该变量分配给一个隐藏的输入字段。
在 HTML 文件中
<input type="hidden" name="mydate" value="{{ mydate }}" />
<b-datetimepicker
v-model="mydate"
...>
</b-datetimepicker>
在 JS 文件中
data() {
...,
mydate: null
}
推荐阅读
- firebase - 实时数据库写入不适用于 firebase 服务
- c# - 我尝试将 List 类型从 AccessLayer 返回到 Windows 表单上的数据网格,但得到 ArgumentNullException
- javascript - Phaser js 3 loadTexture 不是函数
- elasticsearch - 如何通过连接两个数组来进行术语聚合?
- android - 当手机处于睡眠/待机模式时,Android App 失去声音/计时
- angular - 重置分页器首页角度材料
- ios - UITableView 在删除一行或多行后留下空白单元格的模式
- java - Java 检查 CRL 颁发证书的 cRLSign KeyUsage 位吗?
- python - BeautifulSoup 没有提取全表
- android - 无法在颤动中保存 TabBar 选项卡位置的状态