Van Address Edit

Vant AddressEdit Component

Used to create, update, and delete receiving addresses.

When to Invoke

Invoke this skill when:

• User needs to implement address creation functionality
• User wants to edit existing address information
• User needs to delete address functionality
• User wants to set default address
• User asks about address form validation
• User needs address search or autocomplete features

Features

• Address Management: Create, update, and delete addresses
• Area Selection: Three-level linkage for province/city/district selection
• Address Search: Support for address search and autocomplete
• Default Address: Option to set address as default
• Form Validation: Built-in validation for phone numbers and other fields
• Custom Validation: Support for custom validation functions
• Loading States: Loading status for save and delete operations
• Flexible Layout: Configurable visibility for area and detail fields

API Reference

Props

Events

Slots

Methods

Use ref to get AddressEdit instance and call instance methods.

Types

import type {
  AddressEditInfo,
  AddressEditProps,
  AddressEditInstance,
  AddressEditSearchItem,
} from 'vant';

AddressEditInfo Data Structure

AddressEditSearchItem Data Structure

Usage Examples

Basic Usage

<template>
  <van-address-edit
    :area-list="areaList"
    show-delete
    show-set-default
    show-search-result
    :search-result="searchResult"
    :area-columns-placeholder="['Choose', 'Choose', 'Choose']"
    @save="onSave"
    @delete="onDelete"
    @change-detail="onChangeDetail"
  />
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { areaList } from '@vant/area-data';

const searchResult = ref([]);

const => {
  showToast('Save');
  console.log('Address saved:', info);
};

const => {
  showToast('Delete');
  console.log('Address deleted:', info);
};

const => {
  if (val) {
    searchResult.value = [
      { name: 'Name1', address: 'Address1' },
      { name: 'Name2', address: 'Address2' },
    ];
  } else {
    searchResult.value = [];
  }
};
</script>

Edit Existing Address

<template>
  <van-address-edit
    :area-list="areaList"
    :address-info="addressInfo"
    show-delete
    show-set-default
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { areaList } from '@vant/area-data';

const addressInfo = ref({
  name: 'John Snow',
  tel: '13000000000',
  province: 'Zhejiang Province',
  city: 'Hangzhou',
  county: 'West Lake District',
  addressDetail: '123 Main Street',
  areaCode: '330106',
  isDefault: true,
});

const => {
  showToast('Address updated');
};

const => {
  showToast('Address deleted');
};
</script>

With Loading States

<template>
  <van-address-edit
    :area-list="areaList"
    :is-saving="saving"
    :is-deleting="deleting"
    show-delete
    @save="onSave"
    @delete="onDelete"
  />
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { areaList } from '@vant/area-data';

const saving = ref(false);
const deleting = ref(false);

const (info) => {
  saving.value = true;
  try {
    await saveAddress(info);
    showToast('Saved successfully');
  } finally {
    saving.value = false;
  }
};

const (info) => {
  deleting.value = true;
  try {
    await deleteAddress(info);
    showToast('Deleted successfully');
  } finally {
    deleting.value = false;
  }
};
</script>

With Custom Validation

<template>
  <van-address-edit
    :area-list="areaList"
    :tel-validator="telValidator"
    :validator="customValidator"
    @save="onSave"
  />
</template>

<script setup>
import { areaList } from '@vant/area-data';

const telValidator = (tel) => {
  return /^1[3-9]\d{9}$/.test(tel);
};

const customValidator = (key, value) => {
  if (key === 'name' && !value.trim()) {
    return 'Name is required';
  }
  if (key === 'tel' && !/^1[3-9]\d{9}$/.test(value)) {
    return 'Invalid phone number';
  }
  return '';
};

const => {
  console.log('Valid address:', info);
};
</script>

Using Methods

<template>
  <van-address-edit
    ref="addressEditRef"
    :area-list="areaList"
    @save="onSave"
  />
  <van-button @click="setDetail">Set Detail</van-button>
  <van-button @click="setArea">Set Area</van-button>
</template>

<script setup>
import { ref } from 'vue';
import { areaList } from '@vant/area-data';

const addressEditRef = ref();

const setDetail = () => {
  addressEditRef.value?.setAddressDetail('123 Main Street');
};

const setArea = () => {
  addressEditRef.value?.setAreaCode('330106');
};

const => {
  console.log('Address:', info);
};
</script>

Without Area Selection

<template>
  <van-address-edit
    :area-list="areaList"
    :show-area="false"
    @save="onSave"
  />
</template>

<script setup>
import { areaList } from '@vant/area-data';

const => {
  console.log('Address without area:', info);
};
</script>

Best Practices

1. Use Official Area Data: Import @vant/area-data for China province/city/district data
2. Validate Phone Numbers: Use tel-validator for custom phone validation
3. Handle Loading States: Show loading indicators during async operations
4. Provide Feedback: Show toast messages after save/delete operations
5. Pre-fill Data: Use address-info when editing existing addresses
6. Custom Validation: Implement validator for comprehensive form validation
7. Search Integration: Use search-result and show-search-result for address autocomplete