Vue / Buefy Datetimepicker：如何将 vue 组件的结果提交到表单？答案

【问题标题】：Vue / Buefy Datetimpciker: How can I submit the results of an vue compontent to a form?Vue / Buefy Datetimepicker：如何将 vue 组件的结果提交到表单？
【发布时间】：2021-03-21 11:21:48
【问题描述】：

对于我的新网站项目，我想在 html 表单中使用日期时间选择器。当我使用 Bulma 作为 CSS 框架时，我想使用 buefy datetimepicker https://buefy.org/documentation/datetimepicker，它正在使用 vue。

目前，日期时间选择器在我的网站上显示得很好，但是，通过 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>

【问题讨论】：

标签： vue.js bulma buefy

【解决方案1】：

您应该通常使用 v-model 将 datetimepicker 绑定到一个变量，然后将该变量分配给一个隐藏的输入字段。

在 HTML 文件中

<input type="hidden" name="mydate" value="{{ mydate }}" />
<b-datetimepicker
    v-model="mydate"
    ...>
</b-datetimepicker>

在JS文件中

data() {
    ...,
    mydate: null
}

【讨论】：