不使用内联模板实现三级联动，

<template>
    <div>
        <selectDistrict @change="onDistrictChanged" :init-data="initData"></selectDistrict>
        <input type="hidden" name="province" v-model="province">
        <input type="hidden" name="city" v-model="city">
        <input type="hidden" name="district" v-model="district">
        <div class="form-group row">
          <label class="col-form-label text-md-right col-sm-2">详细地址</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="address" v-model="address">
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label text-md-right col-sm-2">邮编</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="zip" v-model="zip">
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label text-md-right col-sm-2">姓名</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="contact_name" v-model="contact_name">
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label text-md-right col-sm-2">电话</label>
          <div class="col-sm-9">
            <input type="text" class="form-control" name="contact_phone" v-model="contact_phone">
          </div>
        </div>
        <div class="form-group row text-center">
          <div class="col-12">
            <button class="btn btn-primary" @click="submit">提交</button>
          </div>
        </div>
    </div>
</template>
<script>
import SelectDistrict from './SelectDistrict'
export default {
    components: {
        'selectDistrict': SelectDistrict
    },
    // 传来的是个json字符串
    props: {
        initData: {
            type: String,  
            default: ''
        }
    },
    data() {
        // 数据全部在编辑的时候才会用到
        return {
            province: '',
            city: '',
            district: '',
            address: '',
            zip: '',
            contact_name: '',
            contact_phone: ''
        }
    },
    created() {
        // 将 initData 这个json字符串 转换成 json对象
        let initData = JSON.parse(this.initData)
        if(initData.length === 0){
            return
        }
        // console.log(initData)
        this.contact_name = initData.contact_name
        this.contact_phone = initData.contact_phone
        this.zip = initData.zip
        this.address = initData.address
    },
    methods: {
        onDistrictChanged(value) {
            if(value.length === 3) {
                this.province = value[0]
                this.city = value[1]
                this.district = value[2]
            }
        },
        submit() {
          var requireData = {
            province: this.province,
            city: this.city,
            district: this.district,
            contact_name: this.contact_name,
            contact_phone: this.contact_phone,
            zip: this.zip,
            address: this.address,
          }
          let initData = JSON.parse(this.initData)
          if(initData.length === 0){
            // 添加请求
            axios.post('/addresses', requireData)
              .then((res) => {
                location.href = '/addresses'
              })
          }else {
            // 更新请求
            axios.put('/addresses/' + initData.id, requireData)
              .then((res) => {
                // console.log(res.data)
                location.href = '/addresses'
              })
          }
        }
    }
}
</script>Copy

<template>
    <div class="form-group row">
        <label class="col-form-label col-sm-2 text-md-right">省市区</label>
        <div class="col-sm-3">
            <select class="form-control" v-model="provinceId">
                <option value="">选择省</option>
                <option v-for="(name, id) in provinces" :value="id">{{ name }}</option>
            </select>
        </div>
        <div class="col-sm-3">
            <select class="form-control" v-model="cityId">
            <option value="">选择市</option>
            <option v-for="(name, id) in cities" :value="id">{{ name }}</option>
            </select>
        </div>
        <div class="col-sm-3">
            <select class="form-control" v-model="districtId">
            <option value="">选择区</option>
            <option v-for="(name, id) in districts" :value="id">{{ name }}</option>
            </select>
        </div>
    </div>
</template>
<script>
import addressData from 'china-area-data/v4/data'
export default {
    props: {
        initData: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            provinces: addressData['86'],
            cities: {},
            districts: {},
            provinceId: '',
            cityId: '',
            districtId: ''
        }
    },
    created() {
        let initData = JSON.parse(this.initData)
        if(initData.length === 0) {
            return
        }
        this.setFormValue(initData)
    },
    watch: {
        provinceId(newVal) {
            this.cities = addressData[newVal]
        },
        cityId(newVal) {
            this.districts = addressData[newVal]
        },
        districtId() {
            this.$emit('change', [this.provinces[this.provinceId], this.cities[this.cityId], this.districts[this.districtId]])
        }
    },

    methods: {
        setFormValue(initData) {
            // 从当前省列表中找到与相同的值的索引
            for(var key in this.provinces) {
                if(this.provinces[key] === initData.province) {
                    this.provinceId = key
                }
            }
            this.cities = addressData[this.provinceId]
            for(var key in this.cities) {
                if(this.cities[key] === initData.city) {
                    this.cityId = key
                }
            }
            this.districts = addressData[this.cityId]
            for(var key in this.districts) {
                if(this.districts[key] === initData.district) {
                    this.districtId = key
                }
            }            
        }
    }
}
</script>Copy

import AddressCreateAndEdit from './components/AddressCreateAndEdit'
const app = new Vue({
    el: '#app',
    components: {
        'address-create-and-edit': AddressCreateAndEdit
    }
});Copy

@extends('layouts.app')
@section('title', $address->id ? '编辑' : '新增')
@section('content')
  <div class="row">
    <div class="col-md-10 offset-lg-1">
      <div class="card">
        <div class="card-header bg-transparent">
          <h2 class="text-center">
            {{ $address->id ? '编辑' : '新增' }}收货地址
          </h2>
        </div>
        <div class="card-body">
            <address-create-and-edit init-data="{{ json_encode($address) }}"></address-create-and-edit>
        </div>
      </div>
    </div>
  </div>
@endsectionCopy