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