【VUE】IView.js下拉框数据双向绑定

写在前面的

Select Option 组件
静态数据绑定

动态数据绑定
动态绑定

获取鼠标选取的option选项的返回值

总结

写在前面的

   在Iview.js的众多组件中，drop selection也是使用比较频繁的组件之一，下面就用最为简单的方法来实现下拉框中数据的动态绑定。

Select Option 组件

静态数据绑定

首先，我们先了解一下官方API文档中的例子

效果图



代码示例：

<template>
<Select v-model="model1" style="width:200px">
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</template>
<script>
//这里需要说明的是，在返回的citylist中，使用双向数据绑定；
//可以看到，页面标签<select>内部写有<option>选项的v-for循环，:value代表citylist中的value值，:key代表数据标识,{{这里代表选项中需要显示什么}}
export default {
data () {
return {
cityList: [
{
value: 'New York',
label: 'New York'
},
{
value: 'London',
label: 'London'
},
{
value: 'Sydney',
label: 'Sydney'
},
{
value: 'Ottawa',
label: 'Ottawa'
},
{
value: 'Paris',
label: 'Paris'
},
{
value: 'Canberra',
label: 'Canberra'
}
],
model1: ''
}
}
}
</script>

动态数据绑定

动态绑定

很简单，我们还是使用axios的get方式，从后台获取返回值，然后动态绑定到citylist中

<Select clearable filterable style="width:120px">
<Option v-for="item in citylist" :value="item.value":key="item.value">{{item.label}}</Option>
</Select>

import axios from 'axios'
//定义全局常量路由，方便其他方法调用
const url="localhost:8888/api/querycity"
export default {
data () {
return {
//这里需要注意的是，返回的数据citylist中不需要声明任何属性和内容。
cityList: []
}
},
methods:{
queryAllCity(){
axios.get(url)
.then(function(reponse){
//将后台返回的数据绑定给citylist，需要注意的是：
//由于在option中循环显示的是label，标记的是value所以后台返回的list中必须也要含有label和value属性
this.citylist=response.data
})
.catch(function(error){
alert(error)
})
}
}

}

.NET后台代码

[RoutePrefix("api")]
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class OrderController : ApiController{
[HttpGet]
[Route("querycity")]
public IList<city> getCity(){
//将citylist返回给前台
return citylist;
}
}

到这里，我们就成功的把查询出来的数据绑定到了前端的组件中了

获取鼠标选取的option选项的返回值

说道这里，不得不说vue的机制很赞。只要是涉及到页面值的获取，我们都可以使用这样的方法来获取，我们使用v-model来获取页面选取的option值

//在这里，我们的select标签发生了变化，增加了v-model
//item是script中定义的一个对象，cityID是其中的属性
<Select v-model="item.cityID" clearable filterable style="width:120px">
<Option v-for="item in citylist" :value="item.value":key="item.value">{{item.label}}</Option>
</Select>

export default {
data () {
return {
cityList: [],
//我们在这里定义item对象，并定义其中的属性，默认为空
item:{cityID:''}
}
},
methods:{
queryAllCity(){
axios.get(url)
.then(function(reponse){
//将后台返回的数据绑定给citylist，需要注意的是：
//由于在option中循环显示的是label，标记的是value所以后台返回的list中必须也要含有label和value属性
this.citylist=response.data
})
.catch(function(error){
alert(error)
})
}
//继续上面的方法，我们需要将选择到的数据传到后台方法
queryCityByID(){
//这里就要说一下:key的用处了，由于key绑定的是value，所以item.cityID获取到你选中的值，也是value，虽然显示的是label中的内容，但是当你选择了某一个城市，那么获取的是value的值
var _temp=this.item.cityID
//这里可以传对象或者参数，取决于后台的写法
axios.post(url,_temp/*或者item*/)
.then(function(response){
/*********/
})
.catch(function(error){
/**********/
}
}
}
}

总结

   所有的Iview的组件实现双向绑定或者查询都可以使用这一个套路，包括比较困难的Tree组件，也可以在不适用render函数的情况下套用。