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

Question

对于我的新网站项目，我想使用 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>

Answer 1

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

在HTML文件中

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

在 JS 文件中

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

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

Vue / Buefy Datetimpciker: How can I submit the results of an vue compontent to a form?

vue.js

bulma

buefy