如何在vue里用v-for循环展示动态的数组？

Question

需求描述:

其实就是根据组件中data里的一个对象，循环出一个表单，表单里有的是input框，
有的是select框，而select框里面的选项，我也想使用循环...有点说不清了，直接看代码吧:

相关代码

数据：

data() {
    return {
    
        NERole:['SR','CPE','AGG_LSW','ACC_LSW','OLT','DSLAM','MxU','MSAN','ONT'],//用于遍历select框里option的数组
        protocol:['TELNET','SSH'],
        agentPath:[],
        modifyDialog:true,
        modifyObj:{  //用于遍历产生html的对象
             basicInfo:{
                 NEGroup:'',
                 NERole:''
             }
        },

<div v-for="item,key in modifyObj">
    <el-row class="modify-item" v-for="i,k in item">
        <el-col :span="6" v-text="computedStr(k)"></el-col>
        <el-col :span="15">
            <div v-if="k==='NERole'||k==='protocol'||k==='agentPath'">
                <el-select style="width: 100%" v-model="modifyObj[key][k]" :placeholder="$t('collector.choose')">
                    <el-option :key="b" v-for="a,b in this[k]" :label="a" :value="a"></el-option>
                </el-select>
            </div>
            <div v-else>
                <el-input :type="k==='password'?'password':'text'" v-model="modifyObj[key][k]"></el-input>
            </div>
        </el-col>
        <el-col :offset="1" :span="2">
            <el-button @click="deleteItem(key,k)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
        </el-col>
    </el-row>
</div>

你期待的结果是什么？实际看到的错误信息又是什么？

因为modifyObj里的key和用于遍历产生option的数值的名字是一样的，所以我想直接把k作为一个动态属性传给this，
但结果是select框里获取不到对应的数组。。。

请各位大大不吝赐教~~

Answer 1

经同事指点，写了个方法处理k的值：

html：

<el-select style="width: 100%" v-model="modifyObj[key][k]" :placeholder="$t('collector.choose')">
    <el-option :key="b" v-for="a,b in handleKey[k]" :label="a" :value="a"></el-option>
</el-select>

methods:

handleKey(key){
    return this[key]
}

Answer 2

或许这个可以让你有启发：https://zhuanlan.zhihu.com/p/...