根据从另一个字段中选择的内容动态填充字段

2024-05-30 • 问答

我正在尝试设置一个表单，并在从客户ID中选择一个值时自动填写名称和ID。 v-for是具有名称，id和公司ID的对象数组

        .form-field
          label(for="customer_name") Customer name
          input(type="text" autocomplete="off" v-model="customer_name" readonly)
        .form-field
          label(for="customer.customer_id") Customer ID
          select(type="number" autocomplete="off" v-model="customer_id")
            option(v-for="id in customers") {{id.customer_Id}}
        .form-field
          label(for="company_id") Company ID
          input(v-model="company_id" readonly)

在html中是否有一种简便的方法来执行此操作，还是需要Vue中的其他代码？

您无需将<select>菜单绑定到所选客户的ID（使用v-model），而是将其绑定到整个客户对象，则可以轻松访问selectedCustomers名称， ID等：

   .form-field
      label(for="customer_name") Customer name
      input(type="text" autocomplete="off" v-model="selectedCustomer.name" readonly )
    .form-field
      label(for="customer_id") Customer ID
      select(autocomplete="off" v-model="selectedCustomer")
        option(v-for="customer in customers" :value="customer" :key="customer.customer_Id") {{customer.name}}
    .form-field
      label(for="company_id") Company ID
      input(v-model="selectedCustomer.company_Id" readonly)

您需要创建一个属性来存储selectedCustomer对象：

data() { return {
   customers: [ ... ]
   selectedCustomer: {},} },

根据从另一个字段中选择的内容动态填充字段

zhaoyuan6677 回答：根据从另一个字段中选择的内容动态填充字段

大家都在问