Vue search customer detail based on phone number input and auto fill address

Question

I try to take customer (name, address) based on phone number input. if customer is there then I want the name and address to auto-filled based on customer data we got. below are my code.

my form

<v-row>
    <v-col cols="12">
        <v-text-field :rules="contactRules" v-model="form.contact" label="Contact" type="number" @input="searchCustomerContact"></v-text-field>
    </v-col>
    <v-col cols="12">
        <v-text-field :rules="nameRules" v-model="form.name" label="Name"></v-text-field>
    </v-col>
    <v-col cols="12">
        <v-textarea rows="1" :rules="address1Rules" v-model="form.address_line_1" label="Address" auto-grow clearable clear-icon="cancel"></v-textarea>
    </v-col>
</v-row>

data()

data() {
 return {
  valid: false,
  form: {},
  nameRules: [v => !!v || "Name is required"],
  contactRules: [v => !!v || "Contact is required"],
  address1Rules: [v => !!v || "Address is required"]
 };
},

search Customer ()

searchCustomerContact(val) {
  if (val.length == 10) {
    this.$axios
      .get("customers?contact=" + val)
      .then(res => {
        if (res.data != null) {
          this.form.name = res.data.name;
          this.form.address_line_1 = res.data.address_line_1;
        } else {
          this.form.name = null;
          this.form.address_line_1 = null;
        }
      })
      .catch(err => {
        throw err;
      });
  }
}

My controller

public function getCustomerByContact()
{
    $data = Order::where('contact', request()->contact)->first();
    return response()->json($data, 200);
}

Route

Route::get('customers', 'OrderController@getCustomerByContact');

My problem is when data is found, it cannot auto-filled the name and address field. I'm new in vue. If contact is not there then the (name, contact) field is always empty so I think no need to do that part (maybe)

thanks in advance

If I add `:value="form.name"` and `:value="form.address_line_1"` it almost correct, but it cannot display — Vpa, Jul 07 '20 at 08:26
For those who read this question, when I type something in name filed (eg: type `as`) then check the data by entering contact, then the form is filled with `DB-data` just as I want. but when I didn't fill the name, then my data is in DOM but not in my form view — Vpa, Jul 07 '20 at 08:39

score 0 · Answer 1 · answered Jul 07 '20 at 10:28

For those who have this kind of problem, I solved by editing like below

<v-text-field :rules="nameRules" v-model="form.name" label="Name" :value="form.name"></v-text-field>
<v-textarea rows="1" :rules="address1Rules" v-model="form.address_line_1" label="Address" auto-grow clearable clear-icon="cancel" :value="form.address_line_1"></v-textarea>

data() {
 return {
  form: {
    name: "",
    address_line_1: ""
  },
 };
},

add :value in form text-field and name & address in data()->form

Vue search customer detail based on phone number input and auto fill address

1 Answers1