问题原因:
表单元素是动态添加的,并没有重新渲染
官方也说明了需要主动进行组件渲染才能正常显示
我们可以看到数据其实已经添加到原生的select组件之下了,但是并没有显示到layui的下拉框下
可以看到渲染出来的dl下的dd只有一个选项
解决办法:
前端代码,使用v-for循环ProvinceInfos,添加<option></option>选项
<div class="choose" id="Three_link">
<select>
<option value="" disabled>省</option>
<option v-for="item in ProvinceInfos" :value="item.areaName">
{{item.areaName}}
</option>
</select>
</div>
vue.js代码
let form = layui.form
//加载省市区
new Vue({
el: "#Three_link",
data: {
ProvinceInfos: [],
CityInfos: [],
TownInfos: []
},
mounted: function () {
this.getProvince()
},
methods: {
getProvince() {
axios.get("/Area/pro").then(res => {
if (res.data.code == 200 && res.status == 200) {
this.ProvinceInfos = res.data.data;
form.render('select') //重要!
}
})
}
}
});
搞定!
注
1、这里要注意el的作用范围,不要发生嵌套,不然会提示以下错误:
如果实在有嵌套关系
建议new Vue不要分开,不要用两个vue
或者直接分开放在同一层级
2、form的定义要写在js代码的外面,不然达不到渲染的效果
如下,不能正常渲染组件
//加载省市区
new Vue({
el: "#Three_link",
data: {
ProvinceInfos: [],
CityInfos: [],
TownInfos: []
},
mounted: function () {
this.getProvince()
},
methods: {
getProvince() {
axios.get("/Area/pro").then(res => {
if (res.data.code == 200 && res.status == 200) {
this.ProvinceInfos = res.data.data;
let form = layui.form
form.render('select')
}
})
}
}
});