Vue + vux asks for help with using onchange events when using Picker components (with details)

problems with vue + vux using onchange events when using Picker components

this is an example of city linkage
because I want to get the province first and then the city
instead of pulling the data at once, so I get the data in the change event of picker, but this will cause each dynamic acquisition of the data, and the assignment will also trigger the onchange event, which will turn into a cyclic request to update the view
what should I do normally? ask for help, gods

.
<template>
    <div>
         <group>
             <picker :data="citySelect" v-model="city" @on-change="change"></picker>
         </group>
         

    </div>
</template>
<script>
import {Picker,Group} from "vux"
   export default{
       data(){
        return {
        citySelect: [
            [{
                name:"",
                value:1
            }],
            [{
                name:"",
                value:1
            }]
        ],
         city: ["",],
         }
       },
       methods : {
        change(value){
        
                  let url = "api/mortgage/"+value[0]+"/cityList"
                  console.log(url)
                  this.$axios(url,"get").then(res=>{
                  let data =res.data.data
                  let arr =[]
                  for (let i in res.data.data){
                         let data = {}
                         data.value = res.data.data[i].city_id
                         data.name= res.data.data[i].city_name
                         arr.push(data)
                     }

                          this.citySelect[1] = arr
                     this.$set(this.citySelect,1,arr)
                     console.log(this.citySelect)
                  })      
        }
       },
       mounted(){
        //    
        let url ="api/mortgage/provList"
           this.$axios(url,"get").then(res=>{
            //    console.log(res.data.data)
            
            //     console.log(this.citySelect)
            let arr =[]
            for (let i in res.data.data){
                let data = {
                    value:"",
                    name:""
                }
                data.value = i
                data.name= res.data.data[i]
                arr.push(data)
            }
               this.$set(this.citySelect,0,arr)
             
           })
            let url2 = "api/mortgage/"+1+"/cityList"
                 this.$axios(url2,"get").then(res=>{
                 let arr =[]
                 for (let i in res.data.data){
                        let data = {
                             value:"",
                             name:""
                        }
                        data.value = res.data.data[i].city_id
                        data.name= res.data.data[i].city_name
                        arr.push(data)
                    }
                        // this.citySelect[1] = arr
                    this.$set(this.citySelect,1,arr)
                 })
       },
       created() {
          
        },
        components:{
        Picker,Group
        }
}
</script>
         
Mar.28,2021

if the data of all provinces and cities cannot be obtained from the beginning again, it is recommended to use two PopupPicker components, so that the event can be triggered after the province is selected.


if it is found that the child nodes of the node already exist, do not request it. Request only if the child node is empty.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b22905-2b62e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b22905-2b62e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?