el-select选择后没反应但可以触发事件

清疚 2022-09-14 09:24 253阅读 0赞

当前伪代码如下：

<template>
        <el-col style="padding-left: 30px;">
         <span style="color: #606266; font-size: 14px; margin-left: 5px">所属产品
             <el-select
                 v-model="variable.productId"
                 placeholder="请选择产品"
                 filterable
                 size="mini"
                 style="margin-left: 1px; width: auto">
               <el-option v-for="item in products" :label="item.name" :value="item.id"
                          :key="item.id" size="mini"
                          style="font-size:12px">
               </el-option>
             </el-select>
           </span>
         </el-col>
    .......

在多层嵌套使用时出现下拉选项选择后不能成功选中但可以触发修改事件，查找[vue官方文档][vue]后看到以下描述：![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAKC4qKemHiueEtg_size_20_color_FFFFFF_t_70_g_se_x_16]  
尝试了官方给出的几种方案，最终修改为以下写法可解决无法被选择问题：

<template>
        <el-col style="padding-left: 30px;">
         <span style="color: #606266; font-size: 14px; margin-left: 5px">所属产品
             <el-select
                @change="cleanInsertVariableProduct"
                 v-model="variable.productId"
                 placeholder="请选择产品"
                 filterable
                 size="mini"
                 style="margin-left: 1px; width: auto">
               <el-option v-for="item in products" :label="item.name" :value="item.id"
                          :key="item.id" size="mini"
                          style="font-size:12px">
               </el-option>
             </el-select>
           </span>
         </el-col>
    .......

事件函数如下：

async cleanInsertVariableProduct(value) { 
    	this.variable = {  productId: value};
    },

[vue]: https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAKC4qKemHiueEtg_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/75c59007eed64ef38628a096bd158bf0.png