学习Vant中，van-dialog不能弹窗问题解决。

        在学习前端Vue中，使用van-dialog发现不能弹窗，源代码如下

<template>
  <div class="goods_car_wrap">
    <div class="address">
      <div v-if="addressList.length <=0" class="add_address" @click="handleAddAddress">
        <van-icon name="add" />
        <span>添加地址</span>
      </div>
      <div v-else>

      </div>
    </div>
    <div class="goods_list_wrap">
      <div class="item flex" v-for="item in carGoodsList" :key="item.id">
        <img :src="require('../assets/image/goods/' + item.goodsPicture)" alt="">  
        <div class="wrap">
          <p>商品名:{{ item.goodsName }}</p>    
          <p>单价:{{ item.goodsPrice }}元</p>
          <p>总金额:{{ item.goodsPrice * item.goodsNum }}元</p>
        </div> 
        <van-stepper v-model="item.goodsNum" async-change @change="(value)=>{handleChange(value,item)}"/>
      </div>      
    </div>
    <van-submit-bar class="sub_wrap" :price="allPrice" button-text="提交订单" @submit="onClickButton" />
    <TabBar/>
    <!-- 添加地址弹窗 -->
    <van-dialog v-model="addressShow" title="添加地址" show-cancel-button>    
      <van-cell-group>
        <van-field v-model="tel" label="姓名" type="tel" />
        <van-field v-model="tel" label="手机号" type="number" required />
        <van-field v-model="tel" label="地址" type="textarea" rows="2" autosize required />
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import {Options,Vue} from 'vue-class-component'
import {Watch} from 'vue-property-decorator'
import TabBar from '@/components/tabBar.vue'
import { useRoute, useRouter } from 'vue-router'
import {getCarListApi,putAddCarApi,getUserAddrApi,putUserAddrApi} from '@/utils/request'
import {goodsListType} from '@/utils/interface'
import {useStore} from 'vuex'

@Options({
    components:{
      TabBar
    }    
  })
export default class goodsCar extends Vue{
  router = useRouter()
  route = useRoute()
  store = useStore()

  carGoodsList:goodsListType[] = []  
  addressList:any[] = []
  allPrice = 0
  addressShow = false
  tel: any

  //监控watch carGoodsList改变后重新计算价格
  @Watch('carGoodsList',{deep:true,immediate:true})
  watchCarGoodsList(val:goodsListType[],oldVal:goodsListType[]){
    this.allPrice = this.countPrice()
  }

  onClickButton = ()=>{
    console.log('display')
  }
  countPrice = ():number=>{
    let price = 0
    this.carGoodsList.forEach(el=>{
      price += el.goodsNum * el.goodsPrice
    })
    return price*100
  }

  handleChange = async(val:string,item:goodsListType):Promise<boolean>=>{
    const res = await putAddCarApi({
      'userId': this.store.state.uInfo[0].id,
      'goodsId': item.id,
      'goodsNum': val
    })
    if (res.status == 200){
      return true
    } else {
      return false
    }
  }

  //去购物车地址
  getAddress = async():Promise<void>=>{
    const res = await getUserAddrApi({
      userId:this.store.state.uInfo[0].id
    })
    if (res.status == 200){
      console.log('客户收货地址：',res)
      this.addressList = res.data
    }
  }

  //添加地址
  handleAddAddress = ()=>{
    console.log('显示地址弹窗框',this.addressList.length)
    this.addressShow = true
  }

  //初始化加载
  init = async():Promise<void>=>{
    // console.log('this.init()')
    // console.log('this.store.state.uInfo[0].id',this.store.state.uInfo[0].id)
    if (this.store.state.uInfo[0].id){
      // console.log('this.store.state.uInfo[0].id',this.store.state.uInfo[0].id)
      const res = await getCarListApi({
        userId:this.store.state.uInfo[0].id
      })
      // console.log('res',res.status)
      if (res.status == 200){
        // console.log('this.carGoodsList',this.carGoodsList)
        this.carGoodsList = res.data
        this.allPrice = this.countPrice()
      }
      this.getAddress()
    }
  }
  public mounted(){
    // console.log('this.init()')
    this.init()
  }
}

</script>
<style lang="less" scoped>
  .goods_car_wrap{
    .item{
      padding: 30px;
      background: #fff;
      margin-bottom: 30px;
      .wrap{
        font-size: 15px;
        p{
          padding-bottom: 5px;
        }
        img{
          display: block;
          width: 100px;
          height: 100px;
          margin-right: 30px;
        }
      }    
    } 
    .sub_wrap{
      bottom: 50px;
    }   
    .address{
      width: 300px;
      height: 300px;
      background: #fff;
      margin-bottom: 30px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      
      .add_address{
        font-size: 15px;
        font-weight: bold;
      }
    }       
  }
  
</style>

参考网上大神的解决方案，

如全局注册，依然不起作用。

import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
// 局部注册
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component
  }
}

一点点debug发现，问题出在v-model="addressShow"上                              

<van-dialog v-model="addressShow" title="添加地址" show-cancel-button>

只要改成 v-model:show="addressShow" 就可以了。虽然在VS编辑器上有红色错误提示。

<van-dialog v-model:show="addressShow" title="添加地址" show-cancel-button>