[Bug Report] Use vue router and Form slot in a Popover will trigger an error.

[microkof]

Element Plus version

1.0.2-beta.36

OS/Browsers version

Windows 10 / Chrome 74

Vue version

3.0.9

Reproduction Link

https://codepen.io/iamkun/pen/YzXMaVr

Steps to reproduce

I can't use codepen at all, but I still want to mention bugs, so the link above is wrong, but I can provide a preview url,

http://hebeieditor.sinaapp.com/#/

I have created two pages, one of which is written casually, and the other is written in these codes. The key point is that Popover packages the form, and there must be <el-form-item> in Form.

<template>
    <el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button>click 激活</el-button>
      </template>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
      </el-form>
    </el-popover>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let formInline = reactive({});
    function onSubmit() {
      console.log(111);
    }
    return {
      formInline,
      onSubmit,
    };
  },
};
</script>

Use the route function to switch 2 pages. When the page above leaves the route, an error will be reported.

What is Expected?

I hope I can use Popover embedded form normally.

What is actually happening?

I Can't.

[element-bot]

Translation of this issue:

Element Plus version

1.0.2-beta.36

OS/Browsers version

Windows 10 / Chrome 74

Vue version

3.0.9

Reproduction Link

https://codepen.io/iamkun/pen/YzXMaVr

Steps to reproduce

I can't use codepen at all, but I still want to mention bugs, so the link above is wrong, but I can provide a preview url,

http://hebeieditor.sinaapp.com/#/
I have created two pages, one of which is written casually, and the other is written in these codes. The key point is that Popover packages the form, and there must be <el-form-item> in Form.

<template>

<el-popover placement=\"right\" :width=\"400\" trigger=\"click\">
<template #reference>

< El button > Click to activate < / El button >
</template>

<el-form :inline=\"true\" :model=\"formInline\" class=\"demo-form-inline\">
< El form item label = \"approved by\" >

<el-input v-model=\" formInline.user \"Placeholder =\" Examiner \"> < / El input >
</el-form-item>

</el-form>
</el-popover>

</template>
<script>

import { reactive } from \"vue\";
export default {

setup() {
let formInline = reactive({});

function onSubmit() {
console.log (111);

}
return {

formInline,
onSubmit,

};
},

};
</script>

Use the route function to switch 2 pages. When the page above leaves the route, an error will be reported.

What is Expected?

I hope I can use Popover embedded form normally.

What is actually happening?

I Can't.

[inottn]

It is a vue`s bug. vuejs/vue-next#3497

[jw-foss]

You might want to use codesandbox that we have a link on the front page, click that icon you can jump right into the template we made before, fork it then you can have your own code sample.

[jw-foss]

According to the issue vuejs/core#3497, it seems they had already fixed this, you need to upgrade your version to 3.0.10 to fix this issue.

[jw-foss]

I read through the issue description, the root cause of this issue is that they somehow unmounted teleport's children more than once, since ElPopover is implemented with teleport feature, so this issue should be a bug from vue.

[jw-foss]

I will close this issue since it has been fixed by vue, if you have further issue on this, feel free to reopen it.