Laravel，vuejs，Axios，JavaScript中的文本框唯一值

Question

当用户尝试在表单中插入 BageCode 的重复值时，我希望显示 toastr 弹出消息，如果有人可以帮助我，他会非常好。 我其余表单列验证正在工作烤面包机正在工作，但我不知道如何比较数据库中的数据和表单中的数据 像这样

if (this.form.BadgeCode == data.BadgeCode) { 吐司.火（{ 类型：“警告”， title: "徽章代码已被占用。" }); }

EmployeeController 中的代码是：

public function index()
    {
        $date=\Carbon\Carbon::today();
        //  $this->authorize('isAdmin');
        $employee=Employee::where('expiredate','>',$date)->paginate(5);
    // return Employee::all();
    return response()->json($employee);
   }


public function store(Request $request)
        {

        //    $this->authorize('isAdmin');
            $this->validate($request,[           
                // 'BadgeCode'=>'required|string',  
               'BadgeCode'=>'required|unique:employees,BadgeCode',
                'BadgeType'=>'required', 
     ])             'company_id'=>'required',
    }

api路由中的代码为：

Route::apiResources(['employee'=>'API\EmployeeController']);

Employee.vue 中的代码是：

   <div
      style="width:45%;margin-left: 35%;"
      class="modal fade"
      id="addNew"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addNewLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" v-show="!editMode" id="addNewLabel">Add New employee</h5>
            <h5 class="modal-title" v-show="editMode" id="addNewLabel">Update employee's Info</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form
            @submit.prevent="editMode ? updateemployee() : createemployee()"
            enctype="multipart/form-data"
          >
            <div class="modal-body">
              <div class="form-group">
                <select
                  name="company_id"
                  id="company_id"
                  :class="{'is-invalid':form.errors.has('company_id')}"
                  class="form-control"
                  v-model="form.company_id"
                >
                  <option value selected>Select Company</option>
                  <option
                    v-for="Company in Companies"
                    :key="Company.id"
                    :value="Company.id"
                  >{{Company.Company}}</option>
                </select>
                <has-error :form="form" field="company_id"></has-error>
              </div>
              <div class="form-group">
                <input
                  v-model="form.BadgeCode"
                  placeholder="Enter BadgeCode"
                  type="text"
                  name="BadgeCode"
                  class="form-control"
                />
                <!-- :class="{ 'is-invalid': form.errors.has('BadgeCode') }" -->
                <!-- <has-error :form="form" field="BadgeCode"></has-error> -->
              </div>

              <div class="form-group">
                <select
                  name="BadgeType"
                  v-model="form.BadgeType"
                  id="BadgeType"
                  class="form-control"
                  :class="{'is-invalid':form.errors.has('BadgeType')}"
                >
                  <option value selected>Select BadgeType</option>
                  <option value="Resident">Resident</option>
                  <option value="Non-Resident-Expat">Non-Resident Expat</option>
                  <option value="Non-Resident-LN">Non-Resident LN</option>
                  <option value="Baron-employee">Baron-employee</option>
                </select>
                <has-error :form="form" field="BadgeType"></has-error>
              </div>

            </div>
          </form>
        </div>
      </div>
    </div>

脚本中的代码是：

<script>

export default {
  // el: "#wrapper2",


  data() {
    return {          
      seen: false,
      seen2: true,
      color: "blue",
      size: "20px",
      editMode: false,
      Companies: {},
      employees: {},
      form: new Form({
        id: "",
        BadgeCode: "",
        BadgeType: "",
        company_id: "",

      })
    };
  },
  methods: {


    getvalidateion() {
      axios.get("api/employee").then(response => {
        let data = response.data.data;


        if (data) {
          data.forEach(element => {
            if (this.form.BadgeCode == data.BadgeCode) {
              toast.fire({
                type: "warning",
                title: "The badge code has already been taken."
              });
            }
          });
        } else {
          console.log("NO DATA");
        }
      });
    },
    createemployee() {
      this.getvalidateion();
      if (this.form.company_id == "") {
        toast.fire({
          type: "warning",
          title: "Please Select the Company."
        });
      } else if (this.form.BadgeCode == "") {
        toast.fire({
          type: "warning",
          title: "BadgeCode is required."
        });
      } else if (this.form.BadgeType == "") {
        toast.fire({
          type: "warning",
          title: "Please Select the BadgeType."
        });
      } else if (this.form.nationality_id == "") {
        toast.fire({
          type: "warning",
          title: "Please Select the Nationality."
        });
      } else if (this.form.expiredate == "" || this.form.issuedate == "") {
        toast.fire({
          type: "warning",
          title: "Please fill the issuedate or expiredate fileds ."
        });
      } else if (this.form.photo.length == "") {
        toast.fire({
          type: "warning",
          title: "Please select photo."
        });
      } else if (
        this.form.afghanidatephoto != undefined &&
        this.form.afghanidatephoto.length == ""
      ) {
        toast.fire({
          type: "warning",
          title: "Please select AfghaniDate."
        });
      } else {
        this.form
          .post("api/employee")
          .then(() => {
            //    the below function will be use to reload the page

            //   this.$emit("refreshPage");
            $("#addNew").modal("hide");
            toast.fire({
              type: "success",
              title: "employee Created successfully"
            });

            this.form.reset();
            $("#afghanidatephoto").val("");
            $("#photo").val("");
            Fire.$emit("refreshPage");

          })
          .catch(e => {

            console.log(e);
          });
      }
    },



  created() {
    Fire.$on("searching", () => {
      let query = this.$parent.search;
      axios
        .get("api/findemployee?q=" + query)
        .then(data => {
          this.employees = data.data;
        })

        .catch(() => {});
    });
    this.loademployees();
    this.getvalidateion();
    // load the page after 3 secound
    Fire.$on("refreshPage", () => {
      this.loademployees();
    });
  }
};
</script>

模态代码为：

 $table->string('BadgeCode')->unique();

Answer 1

我找到了解决方案 instate of data.BadgeCode 我应该放 element.BadgeCode 反正谢谢大家

getvalidateion() {
      axios.get(this.url).then(response => {
        let data = response.data;
        //this.Companies != undefined && this.Companies.length == 0
        if (data) {
          data.forEach(element => {
            this.employees2.push(element.BadgeCode);
            if (this.form.BadgeCode == element.BadgeCode) {
              toast.fire({
                type: "warning",
                title: "BadgeCode is already has been taken."
              });
            }
          });
        } else {
          console.log("NO DATA");
        }
      });
    }