uniapp下拉框组件

之前写过一个小程序的，引入单个下拉框是没有问题的，但是一个页面引入多个下拉框组件的话就会有bug，比如可以同时展开多个下拉框的问题，在此修复了。如果大家有什么好的办法可以告诉我一下嘛~

小程序选择框_WeiflR10的博客-CSDN博客_小程序选择框

子组件

父组件

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
		isjiantou0:true,
		isjiantou1:true,
		isjiantou2:true,
		isjiantou3:true,
		isjiantou4:true,
		isjiantou5:true,
		isjiantou6:true,
	},
    mutations: {
		getjiantou0(state,n){
			state.isjiantou0=n
		},
		getjiantou1(state,n){
			state.isjiantou1=n
		},
		getjiantou2(state,n){
			state.isjiantou2=n
		},
		getjiantou3(state,n){
			state.isjiantou3=n
		},
		getjiantou4(state,n){
			state.isjiantou4=n
		},
		getjiantou5(state,n){
			state.isjiantou5=n
		},
		getjiantou6(state,n){
			state.isjiantou6=n
		}
	},
    actions: {
		getjiantou0(context,args){
			context.commit('getjiantou0',args);
		},
		getjiantou1(context,args){
			context.commit('getjiantou1',args);
		},
		getjiantou2(context,args){
			context.commit('getjiantou2',args);
		},
		getjiantou3(context,args){
			context.commit('getjiantou3',args);
		},
		getjiantou4(context,args){
			context.commit('getjiantou4',args);
		},
		getjiantou5(context,args){
			context.commit('getjiantou5',args);
		},
		getjiantou6(context,args){
			context.commit('getjiantou6',args);
		},
	}
})
export default store

注：模板字符串。

如果想在js中输出this.isjiantou0  this.isjiantou1  this.isjiantou2 ...，可以使用模板字符串

//`${'jiantou' + i}`
//this[`${'jiantou' + i}`]   这个就相当于this.isjiantou0 所以输出的时候直接是值

for(var i=0;i<6;i++){
    console.log(`${'jiantou' + i}`)  //isjiantou0
    console.log(this[`${'jiantou' + i}`])  //true / false
}