vue的v-for的踩坑

1.v-for的使用:用作遍历array/集合,本次使用v-for遍历商品的源目录和一级目录,由源目录的改变触发一级目录的改变
　a)数据结构(data和json数据)

			data:{
			bookTypeList: [],
            bookOneTypeList: []
            }

．　b)vue绑定

<label>书籍分类</label>
	<select name="parent_type_id" id="DropDownTimezone1" class="input-xlarge" v-model="BookInfo.book_rootType" @change="findBookOneType()">
		<option value="11" >--请选择分类--</option>
		<option :value="bookType.type_id" v-for="(bookType) in bookTypeList">		{{bookType.type_name}}</option>
	</select>
	<select name="type_id" id="DropDownTimezone2" class="input-xlarge" v_model="BookInfo.book_oneType">
		<option value="11" >--请选择分类--</option>
		<option :value="bookOneType.type_id" v-for="(bookOneType) in bookOneTypeList">{{bookOneType.type_name}}</option>
	</select>

c)使用:
　　1)前提条件页面在el示例挂载完成,商品源目录已经完成加载,当点击源目录选中目录时触发以下函数
　　2)本来想使用JQ全局对象遍历数据,获取选中元素的value,结果debug时发现数据的确获取到了,并赋给bookOneTypeList.可是当函数执行完毕,bookOneTypeList的数据还原了
　　3)解决方案:使用for循环遍历数据并赋值

            findBookOneType(){
                    var bookRootType = $("#DropDownTimezone1 option:selected").val();
                    bookTypeListNew = this.bookTypeList
                    /*
                    $.each(bookTypeListNew,function (index,element){
                        if(element.type_id == bookRootType){
                            this.bookOneTypeList = element.oneTypeList
                            return this.bookOneTypeList;
                        }
                    })*/
                for (let i = 0; i < this.bookTypeList.length; i++) {
                    if(this.bookTypeList[i].type_id == bookRootType){
                        this.bookOneTypeList = this.bookTypeList[i].oneTypeList
                    }
                }
            }

d)总结
　　1)JQ使用全局或局部对象遍历时,无法绑定数据
　　2)vue的methods内部如果有ajax请求或者是其它函数(匿名),则在里面无法通过this获取vue的data