在非webpack构建的前端项目中使用v-sevlet

在非webpack构建的前端项目中使用v-sevlet

首先引入js文件和css文件

<link rel="stylesheet" href="${ctxStatic}/vue/vue-select.css">
<script type="text/javascript" src="${ctxStatic}/vue/vue-select.js"></script>

使用组件 js代码

Vue.component('v-select', VueSelect.VueSelect)

这样就可以在页面中使用v-select标签了

<v-select v-model="editZc.titleLevel" :options="titleLevel"	key="key" label="value" >
 </v-select>

效果图

遇到的坑（数据回显问题）

如上面的代码用v-model绑定了titleLevel ，但是死活不给显示正常的值，和原生的select标签不太一样，一般原生的设置select的value值就会定位到相应option标签的value对应的数据，而这个却要设置一个选择的对象（如果options里面是对象）

官网api地址 https://vue-select.org/api/props.html#reduce

另一个问题（数据提交）

由于选中的是一个对象，本来是选中一个字符串的 ，这种需求是很常见的。

解决办法：
先把v-sevlet绑定到一个对象上，然后通过@input=“setSelected” 来对真正需要修改的的值进行修改

最后的完整代码
html代码

<v-select v-model="zcSelected" :options="titleLevel" @input="setSelected" key="key" label="value" code="key"> 
</v-select>

js代码

Vue.component('v-select', VueSelect.VueSelect)
vueApp = new Vue({
	el : "#app",
	data : {
		typeList : data,
		currType : {},		// 当前职称类型
		currTypeIndex:-1,
		currZcIndex :-1,		// 当前的职称
		editType : {},		// 当前编辑的职称类型
		editZc : {},		// 当前编辑的职称
		zcList : [],
		titleLevel:[],
		zcSelected:{}

	},
	methods : {
		selectType : function(item) {
			this.currType = item;
			this.zcList = item.zcList;
			if (this.currType.zcList == undefined) {
				window.top.layer.load(1, {
					shade : [ 0.1, '#fff' ]
				//0.1透明度的白色背景
				});
				$.get(
						"${ctx}/setting/settingZc/getAllJson?typeId="
								+ item.id, function(data) {
							window.top.layer.closeAll();
							vueApp.currType.zcList = data;
							vueApp.zcList = data;
						});
			}
		},
		setSelected(value) {
		     this.editZc.titleLevel = value.key;
		  }
	}
});

function find(arr,key,value){
			for(var i=0;i<arr.length;i++){
				if(arr[i][key] == value)
					return arr[i];
				}
			return null;
		}

回显代码

vueApp.zcSelected =  find(vueApp.titleLevel,'key',‘当前数据库保存的key具体值’);;

总结

1、如果options是一个对象数组（非字符串）那么v-sevlet需要绑定一个对象
2、数据回显需要根据key找到options里面的元素，并设置给绑定的对象上