如何在element-UI 组件的事件中传递自定义参数

最新推荐文章于 2023-12-26 20:57:44 发布

原创最新推荐文章于 2023-12-26 20:57:44 发布 · 8.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#element #vue.js

技能GET 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在Vue中使用v-for循环创建多个Select组件时，如何正确地在change事件中传递选中值和索引，以实现同一循环内其他组件状态的更新。通过封装一层箭头函数，确保了changeStatus方法能够接收到正确的参数。

以select为例，如果select写在循环里，触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。

下面这样写是无效的：

@change="changeStatus(val, index)"

            <div v-for="(item,index) in itemList">
              <el-select v-model="item.value" @change="changeStatus(val, index)">
                <el-option v-for="op in options" :key="op.key" :label="op.label"
                           :value="op.label"></el-option>
              </el-select>
            </div>

这样再封装一层就可以了：

@change="((val)=>{changeStatus(val, index)})"

            <div v-for="(item,index) in itemList">
              <el-select v-model="item.value" @change="((val)=>{changeStatus(val, index)})">
                <el-option v-for="op in options" :key="op.key" :label="op.label"
                           :value="op.label"></el-option>
              </el-select>
            </div>