我的 Vue.js 代码有问题，将数据插入数据库时​​出错

Posted 2023-02-23

【中文标题】我的 Vue.js 代码有问题，将数据插入数据库时​​出错

【英文标题】：I have problem in my Vue.js code, i am getting errors while inserting data into database

【发布时间】：2019-09-17 18:03:07

【问题描述】：

我在从表单提交数据时遇到 3 个不同的错误

第一个错误是：[Vue 警告]：挂载钩子中的错误：“TypeError: this.getAllUsers is not a function”

然后，如果我在不输入任何内容的情况下测试表单验证，验证有效，但我收到此错误：[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'preventDefault' of undefined"

然后我填写所有字段并单击提交按钮然后我收到此错误：[Vue warn]: Error in v-on handler: "ReferenceError: axios is not defined"

注意：我的 API 运行良好

这是我的代码

这是表格

<template>
  <b-container>
    <div class="update-info">
      <div class="feature-text myinv-title">
        <h5 class="title title-sm">Update your information</h5>
      </div>
      <form id="app" @submit="saveUser" method="post" novalidate="true">

    <p v-if="errors.length">
      <b>Please fill in all the fields</b>
      <ul>
        <li v-for="error in errors" class="alert alert-danger"> error </li>
      </ul>
    </p>

    <div class="form-row">
      <div class="form-group col-md-3">
        <label for="trx">TRX Address No.</label>
        <input
          id="trx"
          class="form-control trx-address-nooverflow"
          v-model="myAddress"
          type="text"
          name="TRX Address"
          readonly
        >
      </div>
      <div class="form-group col-md-3">
        <label for="name">Name</label>
        <input
          id="name"
          class="form-control"
          v-model="name"
          type="text"
          name="name"
        >
      </div>
      <div class="form-group col-md-3">
        <label for="name">Country</label>
        <country-select
         id="Country"
         class="form-control"
         v-model="country"
         :country="country"
         topCountry="US" />
      </div>
      <div class="form-group col-md-3">
        <label for="email">Email ID</label>
        <input
          id="email"
          class="form-control"
          v-model="email"
          type="email"
          name="email"
        >
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-3">
        <label for="email">Mobile No</label>
        <input
          id="mobile"
          class="form-control"
          v-model="mobile_no"
          type="text"
          name="mobile"
        >
      </div>
      <div class="form-group col-md-3">
        <div class="top-30">
          <input type="submit" class="btn btn-btn btn-grad btn-submit" />
        </div>
      </div>
       <div class="clearfix"></div>
    </div>
    </form>
    </div>
  </b-container>
</template>

这是脚本

<script>
export default
  data()
    return
    errorMessage: "",
    successMessage: "",
    errors: [],
    trx_no: "",
    name: "",
    country: "",
    email: "",
    mobile_no: "",
    myAddress: "",
    newUser: trx_no: "", name: "", country: "", email: "", mobile: ""
    
  ,
  mounted: function()
    this.getAllUsers();
  ,

  methods: 

    saveUser(event)
    event.preventDefault()

    this.checkForm()

    if(!this.errors.length) 
       var formData = this.toFormData(this.newUser);

        axios.post('http://localhost:8888/vue-and-php/public/api/update-info-form.php?action=update', formData,  crossdomain: true )
        .then((response) => 

          this.newUser = trx_no: "", name: "", country: "", email: "", mobile: "";

          if(response.data.error)
            this.errorMessage = response.data.message;
          else
            this.getAllUsers();
          
          );
      
    ,
    toFormData: function(obj)
      var form_data = new FormData();
      for(var key in obj)
        form_data.append(key, obj[key]);
      
      return form_data;
    ,
    clearMessage: function()
      this.errorMessage = "";
      this.successMessage = "";
    ,
    //validation
    checkForm: function (e) 
      this.errors = [];

      if (!this.name) 
        this.errors.push("Name Required.");
      
      if (!this.country) 
        this.errors.push("Country Required.");
      
      if (!this.email) 
        this.errors.push('Email Required.');
       else if (!this.validEmail(this.email)) 
        this.errors.push('Valid Email Address Required.');
      
      if (!this.mobile_no) 
        this.errors.push("Phone Number Required.");
      

      if (!this.errors.length) 
        return true;
      

      e.preventDefault();
    ,

    validEmail: function (email) 
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/;
      return re.test(email);
    
  

</script>

我也发布我的 PHP 代码仅供参考

<?php

//Import Database

require 'base.php';


if(isset($_GET['action']))
  $action = $_GET['action'];


//create
if($action == 'update')

  $trx_number = $_POST['trx'];
  $name = $_POST['name'];
  $country = $_POST['country'];
  $email = $_POST['email'];
  $mobile = $_POST['mobile_no'];

  $result = $con->query(" INSERT INTO `update_information` (`id`, `trx_no`, `name`, `country`, `email`, `mobile_no`) VALUES (null,'$trx_number','$name','$country','$email','$mobile') ");
  if($result)
    $res['message'] = "Success";
  else 
    $res['error'] = true;
    $res['message'] = "Error";
  
  $res['update_information'] = $update_information;
  
  $con->close();
 //encoding into json
  echo json_encode($res);
  die();

【问题讨论】：

没有定义任何名为 getAllUsers 的函数。你怎么称呼它而不定义它

试试这个<form id="app" @submit.prevent="saveUser" method="post" novalidate="true"> 并从方法中删除event.preventDefault()。

【参考方案1】：

这里是您的错误的解决方案

没有称为getAllUsers 的方法，您需要定义一个或停止在代码中调用它。 从您的代码中删除 event.preventDefault() 并将您的表单中的 @submit="saveUser" 替换为 @submit.prevent="saveUser"。 使用import axios from 'axios' 将 axios 导入到您的组件中。 注意：确保在您的项目中安装了 axios ins

【讨论】：

Vue 使用“prevent”作为事件修饰符，而不是“preventDefault”

hi prevent default won't work just "prevent" works but stilli am getting "TypeError: Cannot read property 'preventDefault' of undefined"

使用“prevent”而不是“preventDefault”