vue中循环时动态绑定值

在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值

1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {}

2.在循环时通过下标在对象中创建新的值,我循环得时数组allGoodsClass是一个二维数组,此时通过下标的方式绑定,selectVal中得值就会为selectVal0 : "xxx",selectVal1 : "xxx"

<el-select v-for="(item, index) in allGoodsClass" :key="index" v-model="selectVal['selectVal'+ index]" class="goods-select" placeholder="请选择" size="mini" @change="changeGoodsClass(index)">
                      <el-option
                        v-for="(item1,index1) in item"
                        :key="index1"
                        :label="item1.commodity_classification_name"
                        :value="item1.id"
                      />
                    </el-select>

3.在change事件触发后,通过下标即可以知道当前下拉框是循环中的哪一个,此时即可通过selectVal['selectVal' + index]取出对应的值