Is there any way to click the header of the element-ui collapse folding panel to stop bubbling or not to open it?

<el-collapse accordion>
  <el-collapse-item>
    <template slot="title">
        <div v-show="status">{{title}}</div>
        <el-input v-show="!status" v-model="title" placeholder=""></el-input>
    </template>
  </el-collapse-item>
</el-collapse>

this is an editable title. Every time you click on input, the folding panel closes and opens. Is there any way to stop it

?
Jun.01,2022

set a layer of div around el-input to listen for the click event of this div, and then prevent the bubbling event. You can refer to the following example.
https://jsfiddle.net/k1queda9/


// html
<el-input v-show="!status" v-model="title" placeholder="" v-on:click.native.stop='doSomething'></el-input>

// js
 methods: {
      doSomething: function() {
        console.log('')
    }
  }
Menu