我想將三個(gè)下拉框變成一個(gè)組件 初始是沒(méi)問(wèn)題的 下拉福州市可以讀取接口獲取福州市的幾個(gè)區(qū) 然后選區(qū) 查到街道 但是直接傳值的時(shí)候一次性把三個(gè)都傳進(jìn)去導(dǎo)致第一個(gè)讀取了 后面兩個(gè)被重置了 一個(gè)一個(gè)傳又破壞了組件整體性該怎么辦js代碼如下

`

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] = ''

},

},

}

`

回答

試試這個(gè)方案

// data加上一個(gè)listen，初始值為true

data:{

cityListen:true;

countryListen:true;

}

// 在if當(dāng)中加判斷，當(dāng)listen為false時(shí)就不清空

"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進(jìn)行調(diào)用

setVal(citycode, countrycode, towncode) {

this.cityListen = false;

this.countryListen = false;

this.value.citycode = citycode;

this.value.countrycode = countrycode;

this.value.towncode = towncode;

},

多謝大佬提供了思路，稍微調(diào)整下就行 需要修改下citycodewatch改變時(shí)候 的有調(diào)用數(shù)據(jù)庫(kù)所以會(huì)慢點(diǎn) 查詢(xún)countryDict，這時(shí)候 countrycode的watch事件已經(jīng)完成了 所以需要在調(diào)用下 countrycode的watch事件，真的好麻煩 看看后面有沒(méi)辦法優(yōu)化了

`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

}

}

},

// 數(shù)據(jù)庫(kù)讀取數(shù)據(jù)

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

},

},

}`

總結(jié)

以上是生活随笔為你收集整理的html5日期不联动下拉框,下拉框联动问题 赋值时候失效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。