Vue表单提交两次或一次并为空

问题描述

我是 javascript 和 Vue 的新手，我使用 CoreUI Vue 和 js 制作了这个简单的表单，并在 Postgresql 上提交了数据。

在代码中，如果我使用 v-on:submit="postdata" 它提交一次并且为空，如果我使用 v-on:submit.prevent="postdata" 它提交两次，第一次为空，第二次为正确。

请帮助我被困了很多天我找不到问题，

<template>
  <div>
    <CCard>
      <CCardHeader>
        <slot name="header"> <CIcon name="cibCcVisa" /> {{ caption }} </slot>
      </CCardHeader>
      <CForm id="myforma" v-on:submit="postdata">
        <CCardBody>
          <CRow>
            <CCol>
              <CInput name="title" label="title" placeholder="Enter Title" v-model="posts.title" id="title" />
            </CCol>
          </CRow>
          <CRow>
            <CCol>
              <CInput label="year" type="date" v-model="posts.year" name="year" />
            </CCol>
          </CRow>

          <CRow>
            <CCol>
              <CInput name="writer" label="writer" placeholder="Enter the writer" :v-model="posts.writer" />
            </CCol>
          </CRow>
          <CRow>
            <CCol sm="12">
              <CInput name="description" label="description" placeholder="Write the description" v-model="posts.description" />
            </CCol>
          </CRow>

          <CRow>
            <CCol lg="6">
              <CSelect label="type" name="type" :options="['1.Books','2.Comics','3.NOvels','4.Writings']" :value.sync="posts.type" />
            </CCol>
          </CRow>
        </CCardBody>

        <CCardFooter>
          <CButton type="submit" size="sm" color="primary"><CIcon name="cil-check-circle" /> Submit</CButton>
          <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
        </CCardFooter>
      </CForm>
    </CCard>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'forma',data(){
    return{
      posts: {
        title: '',year :'',writer:null,description:null,type: '1.Books'
      },}
  },props: {
    caption: {
      default: 'Thanasis Form'
    }
  },methods: {
    postdata() {
      axios.post('http://localhost/post.PHP',this.posts).then((response) => {this.posts= response.data;
      console.log(response.data)});
      console.log(this.posts);
    }
  }
}
</script>

<style></style>

<?PHP 
include "db.PHP";   

$received_data = json_decode(file_get_contents("PHP://input"),true);

$table= $received_data['title'];
$wri=$received_data['writer'];
    

$result=pg_query($connection,"INSERT INTO tablet (title) VALUES (' $table')");
?>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）