vue中select下拉框远程调用数据

以运维平台中间件管理模块为例子，点击添加按钮后弹出添加中间件窗口，如图：

选择中间件所在的IP地址后，最终显示效果如下：

注：上面的弹窗中实际嵌套的是表单

解决思路：在中间件管理页面，内容是以表格的形式展现的，因此在添加中间件后，数据都是填入到表格中，因此点击添加按钮后，可先调用添加按钮对应的函数，去数据库中获取IP地址数据，然后将获取到的数据赋值给select中的options对应的变量(IP地址是已经存在数据库中，本例子中是通过agent采集然后更新到数据库中的)

实现方法：

1、首先看下添加按钮对应的函数，如图：

因为本例子中新增和编辑都调用同一个函数，再此不讨论编辑，只看新增，内容如下：

从上图看出，在新增页面，也就是添加页面，调用getList()函数，此函数通过gethost调用后台接口获取IP信息，response.data.List表示返回的数据给options，看下data.List的内容如下：

2、查看select标签内容如下：

• item in options：表示遍历切片options中的数据到item中
• key：唯一标识，最好要写
• label: 选项标签，如果不写默认与value相同
• value：获取的值

在第一步中将获取的数据赋值给了options，此时options的内容就是data.List中的内容，item又是遍历options的变量，因此获取IP信息只需要通过item.ip即可

注意：在return中要指定options的默认值为空，否则无法选择，如图：