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

写在前面的

   在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函数的情况下套用。