VUE爬坑之路--Element-UI el-row、el-col、Select下拉框等点击事件不触发问题解决方法

吴冬雪~

已于 2023-09-17 16:19:01 修改

阅读量1.1w

点赞数 4

分类专栏： Vue 文章标签： @click.native @click失效

于 2019-05-22 17:17:18 首次发布

本文链接：https://blog.csdn.net/qq_37548296/article/details/90447831

版权

Vue 专栏收录该内容

34 篇文章 5 订阅

订阅专栏

在使用element-ui组件中card、row、el-col等组件，添加点击事件@click="handleClick（）"，都无法触发点击事件。

@click.native="handleClick（）" 可以解决这个问题

<el-row :gutter="30">
    <el-col
      :span="24"
      v-for="(item,index) in list"
      :key="index"
      @click.native="handleClick()">
        <el-card :body-style="{ padding: '5px' }" >
            hello
        </el-card>
    </el-col>
</el-row>

<el-form-item label="菜品">
    <template>
        <el-select v-model="value" placeholder="请选择菜品" @click="getFood()">
            <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
    </template>
</el-form-item>

在点击请选择部门的时候不能触发点击事件getFood()。

@click="getFood()"换成@click.native="getFood()"就可以了