Vue / Buefy Datetimpciker:如何将vue组件的结果提交给表单？

Question

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

目前，datetimepicker选择器在我的网站上显示得很好，但是，当我通过POST请求提交html表单时，我无法接收结果。

要使选定的日期时间作为php $_POST变量中的变量可用，需要更改什么？

码页上的代码

<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模型将日期选择器绑定到一个变量，然后将该变量赋值给一个隐藏的输入字段。

在HTML文件中

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

在JS文件中

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