闲谈 vue-strap 框架的 vselect 使用方法

1.问题:

之前一直不是太了解下拉框与后台交互的原理

2.解决:

逻辑:获取后台数据 ---> 绑定 label 和 value  和 发送给后端的  "用户所选择的值" ,这里命名为 value.sync

业务场景:

前端代码:

<v-select :placeholder="'请选择书籍分类标签'" 
          :options="bookTag" 
          :options-label="'tagTitle'"
		  :value.sync="searchParam.tagVal"
          :options-value="'id' "></v-select>
	

 

<script>
	import contentService from '../../service/cont';

	export default {
		data() {
			return {
				contentList: [],
				bookTag: [],
				tagTitle: '',
				searchParam: {
					tagVal: null,
					inputVal: ""
				},
				currentPage: 1, //当前页的页码
				total: 0,		 //总条数
				pageSize: 50,	//单页的分页数量
				maxSize: 10,	//能显示页数
				tableTitles: [{
					name: '书名',
					key: 'contentTitle'
				}, {
					name: '作者',
					key: 'authorName'
				}, {
					name: '出版社',
					key: 'publisherName'
				}, {
					name: '主讲人',
					key: 'speaker'
				}, {
					name: '分类标签',
					key: 'tagStr'
				}, {
					name: '发布日期',
					key: 'publishDate'
				}, {
					name: '操作',
					isAction: true,
					class: 'text-center',
					itemActions: [{
						name: 'table-play',
						label: '播放'
					}]
				}],
			}
		},
		beforeDestroy: function () {
			PubSub.unsubscribe('table-play');
		},
		mounted: function () {
			contentService.getBookList(this, {
				pageSize: this.pageSize,
				pageNum: this.currentPage
			});
			contentService.getBookTag(this);
			PubSub.subscribe('table-play', function (msg, args) {
				var rowData = args[0];
				this.player(rowData.id);
			}.bind(this));
		},
		components: {
			tableComponent: function (resolve) {
				require(['../../components/table.vue'], resolve);
			},
			pagination: function (resolve) {
				require(['../../components/pagination.vue'], resolve);
			},
			VSelect: function (resolve) {
				require(['../../components/select.vue'], resolve);
			},
			loading: function (resolve) {
				require(['../../components/loading.vue'], resolve);
			}
		},
		methods: {
			search: function () {
				contentService.getBookList(this, {
					pageSize: this.pageSize,
					pageNum: this.currentPage,
					keywords: this.searchParam.inputVal,
					tagId: this.searchParam.tagVal === 'null' ? '' : this.searchParam.tagVal
				})
			},
			reset: function () {
				this.searchParam.tagVal = null;
				this.searchParam.inputVal = '';
				this.currentPage = 1;
				contentService.getBookList(this, {
					pageSize: this.pageSize,
					pageNum: this.currentPage,
					keywords: this.searchParam.inputVal,
					tagId: this.searchParam.tagVal
				})
			},
			//更换分页页码方法
			pageChange: function () {
				contentService.getBookList(this, {
					pageSize: this.pageSize,
					pageNum: this.currentPage,
				})
			},
			player: function (id) {
				this.$router.push({
					name: 'player',
					query: {
						id: id,
						source: 'bookList'
					},
				})
			}
		}
	}
</script>