我想將三個下拉框變成一個組件 初始是沒問題的 下拉福州市可以讀取接口獲取福州市的幾個區 然后選區 查到街道 但是直接傳值的時候一次性把三個都傳進去導致第一個讀取了 后面兩個被重置了 一個一個傳又破壞了組件整體性該怎么辦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] = ''

},

},

}

`

回答

試試這個方案

// 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;

},

多謝大佬提供了思路，稍微調整下就行 需要修改下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

},

},

}`

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。