下拉框联动问题 赋值时候失效

Question

我想将三个下拉框变成一个组件 初始是没问题的 下拉福州市可以读取接口获取福州市的几个区 然后选区 查到街道 但是直接传值的时候一次性把三个都传进去导致第一个读取了 后面两个被重置了 一个一个传又破坏了组件整体性该怎么办js代码如下
`<template>
<div>

<el-select v-model="value.citycode" class="first-select" placeholder="请选择市级">
  <el-option v-for="item in citycodeDict" :key="item.id" :label="item.name" :value="item.code"></el-option>
</el-select>
<el-select v-model="value.countrycode" placeholder="请先选择市级">
  <el-option v-for="item in countrycodeDict" :key="item.id" :label="item.name" :value="item.code"></el-option>
</el-select>
<el-select v-model="value.towncode" placeholder="请先选择区/县级">
  <el-option v-for="item in towncodeDict" :key="item.id" :label="item.name" :value="item.code"></el-option>
</el-select>

</div>
</template>

<script>
export default {

name: 'AreaSelect',
model: {
  prop: 'value',
  event: 'change',
},
props: {
  value: Object,
},
data () {
  return {
    citycodeDict: [{
      name: '全部',
      code: '',
    }],
    countrycodeDict: [{
      name: '全部',
      code: '',
    }],
    towncodeDict: [{
      name: '全部',
      code: '',
    }],
  }
},
watch: {
  'value.citycode': {
    handler: function (nVal) {
      if (!nVal) {
        this.reset('countrycodeDict', 'countrycode')
        this.reset('towncodeDict', 'towncode')
      } else {
        const id = this.citycodeDict.find(e => e.code === nVal).id
        this.init(id, 'countrycodeDict')
        this.value.countrycode = ''
        this.value.towncode = ''
      }
    },
  },
  'value.countrycode': {
    handler: function (nVal) {
      if (!nVal) {
        this.reset('towncodeDict', 'towncode')
      } else {
        const id = this.countrycodeDict.find(e => e.code === nVal).id
        this.init(id, 'towncodeDict')
        this.value.towncode = ''
      }
    },
  },
},
created () {
  this.init(1, 'citycodeDict')
},
methods: {
  init (id, target) {
    const data = {
      parentId: id || 1,
    }
    // 获取列表
    const _this = this
    this.$http({
      url: _this.$http.adornUrl('aa/bb/cc'),
      method: 'get',
      params: data,
    }).then(({ data }) => {
      if (data && data.code === 200) {
        this[target] = [{ name: '全部', code: '' }]
        this[target] = this[target].concat(data.data)
      }
    })
  },
  reset (valueDict, value) {
    this[valueDict] = [
      {
        name: '全部',
        code: '',
      },
    ]
    this.value[value] = ''
  },
},

}
</script>

<style scoped>

</style>`

Answer 1

试试这个方案

// data加上一个listen，初始值为true
data:{
    cityListen:true;
    countryListen:true;
}

// 在if当中加判断，当listen为false时就不清空
    "value.citycode": {
      handler: function (nVal) {
        if (!nVal) {
          this.reset("countrycodeDict", "countrycode");
          this.reset("towncodeDict", "towncode");
        } else {
          const id = this.citycodeDict.find((e) => e.code === nVal).id;
          this.init(id, "countrycodeDict");
          if (this.cityListen) {
            this.value.countrycode = "";
            this.value.towncode = "";
          }else{
            this.cityListen = true;
          }
        }
      },
    },
    "value.countrycode": {
      handler: function (nVal) {
        if (!nVal) {
          this.reset("towncodeDict", "towncode");
        } else {
          const id = this.countrycodeDict.find((e) => e.code === nVal).id;
          this.init(id, "towncodeDict");
          if (this.countryListen) {
            this.value.towncode = "";
          }else{
            this.countryListen = true;
          }
        }
      },
    }
    
// 添加赋值的方法，在外部使用ref进行调用
    setVal(citycode, countrycode, towncode) {
      this.cityListen = false;
      this.countryListen = false;
      this.value.citycode = citycode;
      this.value.countrycode = countrycode;
      this.value.towncode = towncode;
    },

Answer 2

多谢大佬提供了思路，稍微调整下就行 需要修改下citycodewatch改变时候 的有调用数据库所以会慢点 查询countryDict，这时候 countrycode的watch事件已经完成了 所以需要在调用下 countrycode的watch事件，真的好麻烦 看看后面有没办法优化了
`export default {

name: 'AreaSelect',
model: {
  prop: 'value',
  event: 'change',
},
props: {
  value: Object,
},
data () {
  return {
    cityFlag: true,
    countryFlag: true,
    citycodeDict: [{
      name: '全部',
      code: '',
    }],
    countrycodeDict: [{
      name: '全部',
      code: '',
    }],
    towncodeDict: [{
      name: '全部',
      code: '',
    }],
  }
},
watch: {
  'value.citycode': {
    handler: function (nVal) {
      const _this = this
      if (!nVal) {
        this.reset('countrycodeDict', 'countrycode')
      } else {
        const id = this.citycodeDict.find(e => e.code === nVal).id
        this.init(id, 'countrycodeDict', function () {
          if (!_this.cityFlag) {
            _this.value.countrycode = ''
          } else {
            _this.cityFlag = false
            _this.countryChange(_this.value.countrycode)
          }
        })
      }
    },
  },
  'value.countrycode': {
    handler: function (nVal) {
      this.countryChange(nVal)
    },
  },
},
created () {
  this.init(1, 'citycodeDict')
},
methods: {
  countryChange (nVal) {
    if (!nVal) {
      this.reset('towncodeDict', 'towncode')
    } else if (!this.cityFlag) {
      const id = this.countrycodeDict.find(e => e.code === nVal).id
      this.init(id, 'towncodeDict')
      if (!this.countryFlag) {
        this.value.towncode = ''
      } else {
        this.countryFlag = false
      }
    }
  },
  // 数据库读取数据
  init (id, target, callback) {
    const data = {
      parentId: id || 1,
    }
    // 获取列表
    const _this = this
    this.$http({
      url: _this.$http.adornUrl('major/common/area'),
      method: 'get',
      params: data,
    }).then(({ data }) => {
      if (data && data.code === 200) {
        this[target] = [{ name: '全部', code: '' }]
        this[target] = this[target].concat(data.data)
        if (callback) {
          callback()
        }
      }
    })
  },
  // 重置
  reset (valueDict, value) {
    this[valueDict] = [
      {
        name: '全部',
        code: '',
      },
    ]
    this.value[value] = ''
  },
  setValue (a, b, c) {
    this.cityFlag = true
    this.countryFlag = true
    this.value.citycode = a
    this.value.countrycode = b
    this.value.towncode = c
  },
},

}`