Подробная информация о клиенте Vue search на основе ввода номера телефона и автоматического заполнения адреса

Я пытаюсь взять клиента (имя, адрес) на основе ввода номера телефона. если клиент есть, я хочу, чтобы имя и адрес заполнялись автоматически на основе полученных нами данных о клиенте. ниже мой код.

моя форма

<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() {
 return {
  valid: false,
  form: {},
  nameRules: [v => !!v || "Name is required"],
  contactRules: [v => !!v || "Contact is required"],
  address1Rules: [v => !!v || "Address is required"]
 };
},

поиск клиента ()

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;
      });
  }
}

Мой контроллер

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

Маршрут

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

Моя проблема в том, что когда данные найдены, они не могут автоматически заполнить поле имени и адреса. Я новичок в вью. Если контакта нет, то поле (имя, контакт) всегда пустое, поэтому я думаю, что нет необходимости делать эту часть (возможно)

заранее спасибо


vue.js laravel vue-component laravel-vue
person Vpa    schedule 07.07.2020    source источник
comment
Если я добавлю :value="form.name" и :value="form.address_line_1", это почти правильно, но не может отображаться   -  person Vpa    schedule 07.07.2020
comment
Для тех, кто читает этот вопрос, когда я набираю что-то в поле имени (например: тип as), затем проверяю данные, вводя контакт, затем форма заполняется DB-data, как я хочу. но когда я не заполнил имя, мои данные находятся в DOM, но не в моем представлении формы   -  person Vpa    schedule 07.07.2020

Ответы (1)


arrow_upward
0
arrow_downward

Для тех, у кого есть такая проблема, я решил, отредактировав, как показано ниже.

<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: ""
  },
 };
},

добавить :value в текстовое поле формы и name & address в данные()->форма

person Vpa    schedule 07.07.2020